Centering text inside div in navbar

Centering text inside div in navbar - html

I want to align this text ZENZZEX in the first grid. Perfectlly vertical and horizontal, I already aligned it horizontal.
body{
margin: 0;;
}
.navGrid {
display: grid;
grid-template-columns: repeat(6, 1fr);
height: 40px;
position: fixed;
width: 100%;
top:0;
background-color: white;
box-shadow: 0px 5px 10px rgba(0,0,0,0.3);
}
.span-col-4{
grid-column: span 4 / auto;
}
.navGrid .first{
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
position: relative;
top: 20%;
}
.navGrid .first:hover{
cursor: pointer;
font-size: 1.28em;
}
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
</head>
<body>
<div class="navGrid">
<div class="first">ZENZZEX </div>
<div class="span-col-4 second">Item 2</div>
<div class="third">Item 3</div>
</div>
<div class="content"><h1>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laboriosam hic, adipisci quasi eius nesciunt veniam exercitationem dolorem aperiam id vero perferendis voluptatum ab ad laborum quaerat? Minus exercitationem iure assumenda perspiciatis dolorem ullam? Dolorum accusamus, possimus culpa molestias ipsum sequi animi numquam omnis delectus odio magni id. Obcaecati quo, reiciendis id explicabo veritatis qui excepturi distinctio autem voluptate quaerat dolorem?Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nulla iure ullam, ad nisi distinctio cumque molestiae vitae porro ex nihil facere harum delectus in laborum fugiat corporis maiores deserunt reiciendis laboriosam alias rerum. Nisi corrupti nostrum esse perferendis labore animi iure, nam aut laborum tenetur officia veniam consectetur odio, maxime consequatur deleniti illum harum et dicta quibusdam numquam sit commodi id libero. Facilis, incidunt reprehenderit ad beatae omnis obcaecati adipisci impedit, non quo porro deserunt nemo! Sed quo non reprehenderit! Voluptatibus aspernatur, praesentium harum, quod incidunt fugiat quidem adipisci, itaque pariatur minima deserunt porro velit? Laboriosam, minus! Sit, neque quibusdam.</h1></div>
</body>
</html>

You can do this using flexbox:
.navGrid .first {
color: black;
text-align: center;
font-family: 'Dosis', sans-serif;
font-size: 1.2em;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
}

Related

Portfolio NavBar : HTML, CSS, FLEXBOX

So, This is a very specific problem:
I want you to run the code, and open it in a full window.
Now please inspect the following code, and toggle the responsive mode.
Now, change the dimensions to something small, until you can see a hamburger.
Now click the hamburger. Works fine?
Now close the hamburger.
Scroll until the end of the page, in this mobile view.
Now try opening the hamburger. Most probably it won't work.
Now scroll to about just below the top of the page in the responsive mobile view. Here open the hamburger. You should be able to see a glitched out half menu like included in the image.
I don't know why or how this is happening. Could someone please reslove this? Any help will be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
top: 90px;
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>

I set a top : 80px on your navlinks in your #media (max-width: 800px) and it seems to be working. Take a look.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
/* line I added */
top:90px;;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>

Well, The problem is you never define the top property of the .navlinks. Please check the snippet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
top: 90px;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>

just add top: 90px; to #media (max-width: 800px) { .navlinks {top: 90px;}}
<style>
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
#font-face {
font-family: AstroSpace;
src: url(/fonts/AstroSpace.ttf);
}
body {
margin: 0;
padding: 0;
font-family: "Montserrat", sans-serif;
background-color: #212c3b;
}
header {
background-color: #141b25;
position: sticky;
top: 0;
right: 0;
width: 100%;
}
.main-nav {
height: 90px;
}
.logo {
color: white;
line-height: 90px;
font-size: 30px;
font-weight: 900 ;
text-decoration: none;
margin-left: 30px;
font-family: "Roboto ", sans-serif;
}
.navlinks {
list-style: none;
float: right;
line-height: 90px;
margin: 0;
padding: 0;
}
.navlinks li {
display: inline-block;
margin: 0px 20px;
}
.navlinks li a {
color: white;
text-decoration: none;
font-size: 18px;
transition: all 0.3s linear 0s;
text-transform: uppercase;
}
.navlinks li a:hover {
color: #7ebcb9;
padding-bottom: 7px;
border-bottom: 2px solid #7ebcb9;
}
li a.contact {
background-color: #00adb5;
padding: 9px 20px;
border-radius: 50px;
transition: all 0.3s ease 0s;
border-bottom: none;
}
li a.contact:hover {
background-color: #047e85;
color: white;
border-bottom: none;
}
#check {
display: none;
}
.menu-btn {
font-size: 25px;
color: white;
float: right;
line-height: 90px;
margin-right: 40px;
display: none;
cursor: pointer;
}
#media (max-width: 800px) {
.navlinks {
position: fixed;
top: 90px;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
background: #222831;
}
.navlinks li {
display: block;
}
.navlinks li a {
font-size: 20px;
}
.navlinks li a:hover {
border-bottom: none;
}
.menu-btn {
display: block;
}
#check:checked ~ .navlinks {
right: 0;
}
}
#media (max-width: 360px) {
.logo {
margin-left: 10px;
font-size: 25px;
}
.menu-btn {
margin-right: 10px;
font-size: 25px;
}
.menu-btn:focus {
color: blue;
}
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Navbar</title>
<link rel="stylesheet" href="styles/styles.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"
/>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght#400;800&family=Quicksand:wght#300&family=Roboto:wght#900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<nav class="main-nav">
<input type="checkbox" id="check" />
<label for="check" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
Nikita Gada
<ul class="navlinks">
<li>About Me</li>
<li>Education</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
</header>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Consequatur sapiente, distinctio ipsam rem eos ipsum ea praesentium repellat animi maxime adipisci exercitationem, vel facere? Commodi deserunt minima quas accusantium aliquid tenetur repudiandae quam dolor culpa aperiam voluptates id, quia nobis facilis ipsum perferendis blanditiis nemo sint doloribus hic? Veniam culpa aperiam sunt harum et! Ex eaque incidunt nostrum error corrupti ratione consequuntur obcaecati quaerat, beatae id praesentium quibusdam laborum ipsam dolorum voluptates nemo, omnis quia dolorem quos! Similique labore quos placeat minus illo doloribus iste est nisi necessitatibus, illum totam, inventore incidunt omnis molestiae corporis exercitationem quibusdam ipsum ullam excepturi. Ea exercitationem amet omnis sunt id sed, nobis perspiciatis quidem, tempore asperiores recusandae deserunt aut nihil, aperiam ducimus libero iste nisi debitis nulla voluptates quos nesciunt. Eligendi obcaecati a, nisi porro unde id explicabo! Asperiores vel omnis non alias debitis distinctio, minima nostrum architecto nulla iusto, qui sed accusamus, excepturi ratione? Dolorem doloremque quo autem velit iste quis dolores. Rem earum enim ducimus eaque animi repellendus voluptates debitis consequuntur assumenda autem amet, aperiam culpa inventore sed? Pariatur placeat nesciunt voluptatibus earum cupiditate fuga optio quia sunt suscipit voluptatum delectus facilis nihil ut, nemo itaque, voluptatem nulla consequatur aspernatur consequuntur libero, magnam sequi nobis incidunt asperiores? Sed aspernatur corporis fugiat, animi illum accusantium repellendus laudantium voluptate unde a modi nesciunt non sequi, reprehenderit asperiores doloremque eum necessitatibus quibusdam. A voluptate beatae perferendis natus, cupiditate nihil illo esse vero blanditiis voluptatibus tempore repellat unde numquam quam dignissimos laborum ipsam consectetur minus corrupti quasi! Molestias unde velit, dolor ullam iure debitis maiores et, rem facilis tempore odio, labore omnis aspernatur tempora sunt ratione quos cumque accusantium harum voluptatum. Consequatur aspernatur maxime nobis veritatis quasi provident perferendis veniam dolores nostrum deleniti, consequuntur reprehenderit amet excepturi, quae libero id dolorum voluptatibus assumenda praesentium, quibusdam est sint. Dignissimos fugiat ducimus minima alias dicta sit, excepturi maxime, maiores velit recusandae esse sed ad voluptatibus repudiandae iure quaerat soluta ab sequi officiis id aut. Ipsum error sit vel rerum exercitationem. Nulla ducimus nesciunt incidunt pariatur, quo nihil fugit ipsa dolores maxime eum reiciendis, maiores aliquam quas consequuntur quaerat vel! Ipsum error in itaque placeat accusantium autem, quos, necessitatibus dolores dignissimos perferendis tempora eligendi nobis quis quia tempore, rerum distinctio consectetur? Odit, quisquam a modi atque fugiat provident iste expedita voluptatem eveniet unde molestiae eos, nobis sunt est repudiandae obcaecati voluptatibus dolorum consectetur autem. Neque quidem, modi saepe quibusdam voluptatibus iste distinctio, eum eligendi aliquid cum nisi. Magnam, nulla consequuntur aliquid dolorem maiores odio placeat sint molestiae, quis, tenetur labore nemo! Ipsum reprehenderit ex dolorum nostrum cupiditate, dolore molestias iure eos a doloremque nisi possimus ducimus odio quo! Beatae non necessitatibus fuga accusamus,
</body>
</html>

Please add CSS property in .navlink class. i have added " top:90px; " in this class. when applying position fixed to any element add specific two side values like left and top, Or top and right, Or right and bottom, Or left and bottom.
.navlinks {
position: fixed;
width: 100%;
height: 100vh;
text-align: center;
transition: all 0.5s;
right: -100%;
top: 90px;
background: #222831;
}

How to fix HTML/CSS/JQuery sidebar - content should be hidden until selected

I have the following code which works just fine, with the exception of:
When I click the open in the sidebar, it should show only that
material ("Click on 'Charts' should show Charts material). I should not be able to scroll down the page and see everything.
When an option from the sidebar is selected, it should be highlighted (class="active") so that you know which page you're on.
If there's a better way to do this, I'm open to suggestions.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Side Navigation Bar</title>
<link rel="stylesheet" href="styles.css">
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function(){
$(".hamburger").click(function(){
$(".wrapper").toggleClass("active")
})
});
</script>
</head>
<body>
<div class="wrapper">
<div class="top_navbar">
<div class="logo"><a>Demonstration</a></div>
<div class="top_menu">
<div class="home_link"><span class="icon"><i class="fas fa-home"></i></span><span>Home</span>
</div>
</div>
</div>
<div class="main_body">
<div class="sidebar_menu">
<div class="inner__sidebar_menu">
<ul>
<li><span class="icon"><i class="fas fa-border-all"></i></span> <span class="list">Dashboard</span></li>
<li> <span class="icon"><i class="fas fa-chart-pie"></i></span> <span class="list">Charts</span></li>
<li> <span class="icon"><i class="fas fa-address-book"></i></span> <span class="list">Contact</span></li>
<li> <span class="icon"><i class="fas fa-address-card"></i></span> <span class="list">About</span></li>
<li> <span class="icon"><i class="fab fa-blogger"></i></span> <span class="list">Blogs</span></li>
<li> <span class="icon"><i class="fas fa-map-marked-alt"></i></span> <span class="list">Maps</span></li>
</ul>
<div class="hamburger">
<div class="inner_hamburger">
<span class="arrow">
<i class="fas fa-long-arrow-alt-left"></i>
<i class="fas fa-long-arrow-alt-right"></i>
</span>
</div>
/div>
</div>
</div>
<a name="dash" id="dash">
<div class="container">
<div><h1>Dashboard</h1></div>
<div class="item_wrap">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
</div>
<div class="item_wrap">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
</div>
<div class="item_wrap">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
</div>
<div class="item_wrap">
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
<div class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
</div>
</div>
</a>
<a name="chart" id="chart">
<div class="container">
<div><h1>Charts</h1></div>
<div class="item_wrap">
<div class="item">Chartum ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
<div class="item">Chartum ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
</div>
<div class="item_wrap">
<div class="item">Chartum ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
<div class="item">Chartum ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
</div>
<div class="item_wrap">
<div class="item">Chartum ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
<div class="item">Chartum ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
</div>
<div class="item_wrap">
<div class="item">Chartum ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
<div class="item">Chartum ipsum dolor sit amet, consectetur adipisicing elit. Laborum omnis nihil aut aperiam adipisci suscipit ullam sunt saepe cupiditate quam distinctio officiis tempore laudantium, animi amet corrupti ratione est commodi! Sunt tempora quod magnam optio, reiciendis veritatis, necessitatibus eos molestias facilis reprehenderit maiores ipsum quaerat placeat laborum, a aspernatur corporis.</div>
</div>
</div>
</a>
</div>
</div>
</body>
</html>
CSS
#import url('https://fonts.googleapis.com/css?family=Montserrat+Subrayada|Ubuntu:400,500,700&display=swap');
* {
margin: 0;
padding: 0;
list-style: none;
font-family: 'Ubuntu', sans-serif;
box-sizing: border-box;
text-decoration: none;
}
body {
background: #e8edf5;
width: 100%;
height: 100%;
}
.wrapper .top_navbar {
width: 100%;
height: 65px;
display: flex;
position: fixed;
top: 0;
}
.wrapper .top_navbar .logo {
width: 250px;
height: 100%;
background: #3421C0;
border-bottom: 1px solid #22119d;
}
.wrapper .top_navbar .logo a {
display: block;
text-align: center;
font-family: 'Montserrat Subrayada', sans-serif;
font-size: 20px;
color: #fff;
padding: 20px 0;
}
.wrapper .top_navbar .top_menu {
width: calc(100% - 250px);
height: 100%;
background: #fff;
padding: 0 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.wrapper .top_navbar .top_menu .home_link a {
display: block;
background: #3421C0;
color: #fff;
padding: 8px 15px;
border-radius: 3px;
}
.wrapper .top_navbar .top_menu .home_link a:hover,
.wrapper .top_navbar .right_info .icon_wrap:hover {
background: #5343c7;
}
.wrapper .top_navbar .right_info {
display: flex;
}
.wrapper .top_navbar .right_info .icon_wrap {
padding: 8px 15px;
border-radius: 3px;
background: #3421C0;
color: #fff;
margin: 0 5px;
cursor: pointer;
}
.main_body .sidebar_menu {
position: fixed;
top: 65px;
left: 0;
background: #3421C0;
width: 250px;
height: 100%;
transition: all 0.3s linear;
}
.main_body .sidebar_menu .inner__sidebar_menu {
position: relative;
padding-top: 60px;
}
.main_body .sidebar_menu ul li a {
color: #7467d3;
font-size: 18px;
padding: 20px 35px;
display: block;
white-space: nowrap;
}
.main_body .sidebar_menu ul li a .icon {
margin-right: 8px;
}
.main_body .sidebar_menu ul li a span {
display: inline-block;
}
.main_body .sidebar_menu ul li a:hover {
background: #5343c7;
color: #fff;
}
.main_body .sidebar_menu ul li a.active {
background: #22119d;
color: #fff;
}
.main_body .sidebar_menu .hamburger {
position: absolute;
top: 5px;
right: -25px;
width: 50px;
height: 50px;
background: #e8edf5;
border-radius: 50%;
cursor: pointer;
}
.main_body .sidebar_menu .inner_hamburger,
.main_body .sidebar_menu .hamburger .arrow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.main_body .sidebar_menu .inner_hamburger {
width: 40px;
border-radius: 50%;
height: 40px;
background: #3421C0;
}
.main_body .sidebar_menu .hamburger .arrow {
color: #fff;
font-size: 20px;
}
.main_body .sidebar_menu .hamburger .fa-long-arrow-alt-right {
display: none;
}
.main_body .container {
width: calc(100% - 250px);
margin-top: 65px;
margin-left: 250px;
padding: 25px 40px;
transition: all 0.3s linear;
}
.main_body .container .item_wrap {
display: flex;
margin-bottom: 20px;
}
.main_body .container .item_wrap .item {
background: #fff;
border: 1px solid #e0e0e0;
padding: 25px;
font-size: 14px;
line-height: 22px;
}
.main_body .container .item_wrap .item:first-child {
margin-right: 20px;
}
/* after adding active class */
.wrapper.active .sidebar_menu {
width: 100px;
}
.wrapper.active .hamburger .fa-long-arrow-alt-right {
display: block;
}
.wrapper.active .hamburger .fa-long-arrow-alt-left {
display: none;
}
.wrapper.active .sidebar_menu ul li a .list {
display: none;
}
.wrapper.active .main_body .container {
width: calc(100% - 100px);
margin-left: 100px;
}

If you want that your user click the "Click on Charts" button, it should redirect to a seperate page, because in the same page, the user will always be able to scroll.
If you want to highlight the option that is being clicked, you need to use the onclick event listener, and create a global variable that stores the toggle state.
Example code:
const Links = document.querySelectorAll(".sidebar-links") //sidebar links
for (let link = 0; link < Links.length; link++)
{
link.addEventListener("click", () => {
//check global state
})
}

Text-image responsivenes

I have started learning HTML/css about 2 weeks ago and (among others) this is one of the pages I came up with, but I can't make the image to resize when I shrink down the window. Most of the lessons until now have been about HTML and CSS only and how to make the document easy to read for screen readers and I wanted to do some practice with whatever knowledge I had. Any ideas why the image doesn't shrink down along with the text and why?
Thank you very much!
HTML:
#import url('https://fonts.googleapis.com/css?family=Kelly+Slab&display=swap');
body {
margin: 0;
padding: 0;
background-color: #d89cf6;
}
.top {
position: relative;
padding: 1em 2em 1em 2em;
height: 3em;
background-color: #3e206d;
margin: auto;
overflow: hidden;
border-top: solid 6px;
border-bottom: solid 1px;
}
.top h1 {
position: absolute;
display: flex;
float: left;
margin: 0;
padding: 0;
margin-top: .3em;
font-family: 'Kelly Slab', cursive;
font-size: 2.4em;
color: #f0e3ff;
}
.top ul {
list-style-type: none;
display: flex;
float: right;
margin: 0;
padding: 0;
margin-top: 1.43em;
}
.top li {
padding: 0 0.3em;
margin: auto;
margin-top: .5em;
position: relative;
}
.top a {
text-decoration: none;
color: #f0e3ff;
font-family: 'Kelly Slab', cursive;
font-size: 1.2em;
}
.main {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
.main h2 {
font-size: 1.8rem;
}
.main p {
font-size: 1.3rem;
}
.main img {
min-width: auto;
width: auto;
max-height: 29em;
min-height: 25%;
}
.text_picture {
float:right;
width: auto;
margin: auto;
}
.thank_you {
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
footer {
font-size: 1.2rem;
margin: auto;
text-align: center;
padding: 1.5em 4.7em 2em;
color: #000000;
font-family: 'Kelly Slab', cursive;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Skeleton</title>
<link rel="stylesheet" href="style/main.css" type="text/css">
</head>
<body>
<header>
<div class="top">
<h1>Arghhhh</h1>
<nav class="internal_nav">
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
<section class="main">
<article>
<h2>Lorem, ipsum</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi dolore vero natus libero labore! Voluptas, culpa cum animi, explicabo laudantium fuga rem hic fugiat deleniti eveniet ad dignissimos minus! Nisi cumque dolore illo corrupti quo recusandae possimus aliquam officiis blanditiis, inventore veritatis. Cum itaque molestiae iusto dolorem esse illo saepe ipsam dolor cupiditate neque velit, dolore error earum eveniet tempora!
</p>
<div id="text_picture_container">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit ab magni officiis eos rem in aperiam tenetur quidem maiores, tempore enim, id sapiente velit pariatur ducimus. Velit vero consequuntur possimus quam culpa voluptatum officia est voluptate eum, labore facilis assumenda rerum harum ipsam facere quas cupiditate. Itaque facilis voluptas cupiditate eos? Commodi odit tempore nihil blanditiis, excepturi quidem vero. Nam nesciunt corporis minima alias aperiam voluptate neque quidem consequatur ab sed, mollitia nulla labore expedita? Laboriosam atque error, similique temporibus eius, sunt quaerat nobis vero maxime corrupti quis ipsam. Aliquam rem id harum culpa nesciunt facere sit atque provident neque!
</p>
<div class="text_picture">
<figure>
<img src="images/wallpaper-364615676716148alamn2ffq.jpg" alt="lone tree in a field with a orange/magenta sunset in the background">
<br>
<figcaption>A lonely tree in the middle of a field, with a really colorful sunset background.
</figcaption>
</figure>
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt earum assumenda praesentium dolor et veritatis libero. Eveniet quasi fugiat, consectetur error possimus natus? Quasi explicabo deserunt quisquam necessitatibus hic aspernatur totam tenetur eveniet accusamus! Voluptate reprehenderit sunt repellat aut adipisci temporibus provident vitae amet cum doloribus dolorum tempora, perferendis voluptas aperiam libero similique distinctio quam corrupti consequatur vero magnam commodi. Enim, consequuntur. Quod maiores laudantium nesciunt doloremque, voluptatem dolorum amet. Tempore, vel dignissimos, veniam magni recusandae saepe ab labore itaque eum officiis, quaerat quae eveniet? Placeat nemo aperiam similique earum, tempore dicta totam atque. Perspiciatis, aut. Ea distinctio iure minima, id doloremque quisquam quidem expedita nemo. Facere dignissimos, architecto similique repellendus aliquid dicta deserunt et esse voluptate nulla ipsum quod earum voluptas nobis consectetur expedita quas, non itaque. Optio incidunt dolor distinctio, ducimus beatae doloribus magni ut aliquam a facere laborum ipsam ratione voluptatem. Dolore modi error nemo impedit recusandae?
</p>
<div class="first_survey">
<form class="survey">
<fieldset>
<legend>Chose what impressed you the most:</legend>
<label for="style">The styling</label>
<input type="checkbox" id="style" name="survey_choice" value="style">
<label for="writing">The writing</label>
<input type="checkbox" id="writing" name="survey_choice" value="writing">
<label for="pictures">The pictures</label>
<input type="checkbox" id="writing" name="survey_choice" value="pictures">
<div class="button">
<button type="submit">Submit</button>
</div>
</fieldset>
</form>
</section>
<div href="#" class="thank_you">
<h2>Thank you for taking your time to browse my webpage!
</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt quisquam commodi sapiente quos ut unde consectetur alias culpa veniam, quasi perspiciatis expedita esse accusantium quas enim quam soluta, quibusdam sit? Quisquam placeat, iure possimus cupiditate libero non esse quasi facere deserunt debitis delectus reiciendis aliquid magnam a blanditiis, eaque officia.
<p>
</div>
</article>
</body>
<footer>
<h6>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum, dolore?</h6>
</footer>
</html>

You can always use VH unit which stands for viewport width.
Responsive Text
However, I suggest using REM and EM units instead, of course, this depends on your needs.
REM and EM units
Feel free to read this article which explains this topic in depth.
CSS Font Sizing: Pixels vs Em vs Rem vs Percent vs Viewport Units
Now, regarding responsive image sizing, you can simply add a class with these properties and set it to the image you want.
.responsive {
width: 100%;
height: auto;
}
As I said before, read the Medium article, you can use REM, EM, PX, % units on images as well.

How to fix the bug with the position of background?

The part of the border is hidden. I tried to use different variable of background-position. But it didn't help me.
Example of code:
* {
margin: 0;
padding: 0;
}
.container {
max-width: 1170px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}
.item_wrapper {
display: flex;
justify-content: space-between;
}
.items {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 270px;
background-image: url(https://svgshare.com/i/6MZ.svg);
min-height: 270px;
background-size: cover;
background-repeat: no-repeat;
padding: 0 20px;
}
<div class="container">
<div class="item_wrapper">
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
<div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
<div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
<div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporibus iusto. Vel quasi cupiditate magni excepturi recusandae!</div>
</div>
</div>
P.S. In the example the bottom border is hidden.

You need to force the background size to cover available width and height. In order to achieve that you must specify the background size: background-size: 100% 100%; so it will fill its container.
* {
margin: 0;
padding: 0;
}
.container {
max-width: 1170px;
width: 100%;
margin: 0 auto;
padding: 0 15px;
}
.item_wrapper {
display: flex;
justify-content: space-between;
}
.items {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 270px;
background-image: url(https://svgshare.com/i/6MZ.svg);
min-height: 270px;
background-size: 100% 100%;
background-repeat: no-repeat;
padding: 0 20px;
}
<div class="container">
<div class="item_wrapper">
<div class="items">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, voluptas dicta aut hic dolorum quam ex consequuntur esse vel cum voluptatem tempora expedita molestias optio necessitatibus reiciendis asperiores odio blanditiis!</div>
<div class="items">Tenetur minus cumque enim est in aliquam quam blanditiis obcaecati quae aut quis, ratione rerum facere accusantium? Quos eum, sequi odit exercitationem beatae iusto fugiat maxime nulla a laboriosam rem!</div>
<div class="items">Necessitatibus voluptatum quisquam placeat. Provident quo ut autem voluptatibus assumenda odit maxime rerum! Porro vitae omnis nemo eveniet aspernatur, iste veniam placeat repudiandae. Ab exercitationem non eligendi hic doloremque accusantium?</div>
<div class="items">Id voluptas architecto quisquam nobis. Nisi, dicta, deleniti maxime atque aperiam, fuga reprehenderit cum ex numquam voluptatum totam? Quisquam fugit numquam accusantium temporibus iusto. Vel quasi cupiditate magni excepturi recusandae!</div>
</div>
</div>

just make background-size: contain, it will fix your issue.

CSS layout: make fluid left column and fixed right column equal in height

I have this 2 columns layout where the content is fluid, while the right sidebar has a fixed width.
In the example below I have also used Bootstrap, mainly for aesthetic reasons:
.fluid-fixed {
position: relative;
}
.content-wrapper {
float: left;
width: 100%;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
margin-right: 342px;
clear: both;
overflow: auto;
}
.sidebar {
position: relative;
width: 322px;
margin-left: -322px;
float: right;
overflow: hidden;
background: #fff;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</aside>
</div>
What I have not been able to achieve is make the 2 columns equal in height. Adding height: 100%; to the sidebar did not work.
What is missing?

You don't need the extra .fixed-fluid class. Use the Bootstrap 4 d-flex class for display: flex;.
<div class="container d-flex">
https://www.codeply.com/go/rplszaWQRF

Flexbox can do that:
.fluid-fixed {
display: flex;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
clear: both;
overflow: auto;
}
.sidebar {
overflow: hidden;
background: #fff;
}
.sidebar img {
max-width: 100%;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<img src="https://ppc.news/wp-content/uploads/2017/08/Medium-Rectangle-300x250.jpg" alt="banner">
</aside>
</div>

Using display: flex; instead of position: relative; for the <div class="container fluid-fixed"> element did the job.
.fluid-fixed {
display: flex;
}
.content-wrapper {
width: 100%;
}
.content,
.sidebar {
padding: 10px;
border: 1px solid #ccc;
margin-top: 10px;
}
.content {
margin-right: 342px;
clear: both;
overflow: auto;
}
.sidebar {
width: 322px;
margin-left: -322px;
float: right;
overflow: hidden;
background: #fff;
}
main p {
text-align: justify;
}
main .img-thumbnail.float-left {
margin-right: 10px;
}
#media only screen and (min-width: 1280px) {
max-width: 1200px !important;
}
#media only screen and (max-width: 768px) {
.container {
max-width: 100%;
}
.sidebar {
display: none;
}
.content {
margin-right: 0;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container fluid-fixed">
<div class="content-wrapper">
<main class="content">
<h2>Lorem ipsum dolor sit consectetur adipisicing elit</h2>
<p><img src="//lorempixel.com/200/150" class="img-thumbnail float-left" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic esse quo, dolorum officia placeat, earum eveniet ipsum? Asperiores magnam laboriosam autem quis, voluptatem eos
explicabo enim quo inventore dolorem modi!</p>
<p>Cupiditate dicta distinctio tempore reiciendis ut? Blanditiis cumque officiis, eius mollitia, ut voluptates incidunt asperiores, vel, ratione adipisci tempora harum. Cum quas ratione animi culpa ipsum quasi eaque architecto tempore!</p>
<p>Vero ullam voluptate quis itaque assumenda a, culpa necessitatibus illo! Porro dignissimos, quidem velit odio laudantium quia excepturi fuga harum veritatis sapiente saepe exercitationem animi eos, at a quaerat praesentium.</p>
<p>Velit asperiores dolorum, saepe iusto, dolor quisquam quaerat numquam ab nesciunt dignissimos ad exercitationem veritatis, repudiandae accusantium placeat nostrum similique quas! Iste labore iusto incidunt a fuga ducimus dolores laudantium.</p>
<p>Ipsum amet facilis beatae ex dicta, eligendi deserunt est sapiente inventore vitae ipsam commodi harum. Quisquam reiciendis dolorem facilis. Repellat temporibus pariatur explicabo quod obcaecati aliquid! Dignissimos, at dolor animi.</p>
</main>
</div>
<aside class="sidebar">
<img src="https://ppc.news/wp-content/uploads/2017/08/Medium-Rectangle-300x250.jpg" alt="banner">
</aside>
</div>

We Keep Coding

html mysql json google-apps-script actionscript-3 ms-access google-chrome google-maps reporting-services sql-server-2008

Centering text inside div in navbar - html

You can do this using flexbox: .navGrid .first { color: black; text-align: center; font-family: 'Dosis', sans-serif; font-size: 1.2em; font-weight: 800; display: flex; align-items: center; justify-content: center; }

Related

Portfolio NavBar : HTML, CSS, FLEXBOX

How to fix HTML/CSS/JQuery sidebar - content should be hidden until selected

Text-image responsivenes

How to fix the bug with the position of background?

CSS layout: make fluid left column and fixed right column equal in height

Categories

Resources