I am trying to create a responsive website using bootstrap and am having trouble with making my about section does not go past the given area (the dark gray), here is an example of when browser is downsized and also the hero's font when downsized or viewed on a mobile overlaps the face of the picture, however I am not sure on how about doing it.
body,
html {
height: 100%;
font-size: 100%;
}
.cd-fixed-bg {
font-family: 'Open Sans', sans-serif;
min-height: 100%;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
.cd-scrolling-bg {
min-height: 60%;
}
.cd-fixed-bg.cd-bg-1 {
background-image: url("http://images.boomsbeat.com/data/images/full/209/jobs-jpg.jpg");
}
.cd-scrolling-bg.cd-color-1 {
height: 60%;
background-color: #212121;
color: #fff;
}
.cd-intro {
color: #212121;
position: absolute;
top: 40%;
bottom: auto;
right: auto;
padding-left: 15%;
text-align: left;
max-height: 70%;
}
.cd-intro-dec-1 {
font-weight: 300;
font-size: 48px;
}
.cd-intro-dec-2 {
font-weight: 400;
font-size: 72px;
}
.cd-content-format {
font-family: 'Open Sans', sans-serif;
}
.header-about {
font-weight: 300;
font-size: 60px;
}
.about-sub {
font-weight: 700;
font-size: 18px;
}
.about-content {
font-weight: 400;
}
.about-img-adjust {
padding-top: 20px;
padding-bottom: 10px;
}
.about-quote {
font-weight: 300;
font-style: italic;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tribute Page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<div class="cd-fixed-bg cd-bg-1">
<div class="cd-intro">
<h1 class="cd-intro-dec-1">a tribute to</h1>
<h2 class="cd-intro-dec-2">Steve Jobs</h2>
</div>
</div>
<div class="cd-scrolling-bg cd-color-1">
<div class="container cd-content-format">
<div class="row">
<div class="col-xs-6 col-md-4">
<img src="http://i.imgur.com/w39VG2S.jpg" class="about-img-adjust img-responsive" alt="Steve Jobs">
<blockquote class="blockquote about-quote">"Being the richest man in the cemetery doesn't matter to me. Going to bed at night saying we've done something wonderful, that's what matters to me."</blockquote>
</div>
<div class="col-xs-12 col-md-8">
<h1 class="header-about">about</h1>
<p class="about-sub">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, saepe voluptate sit. Quasi rem minima veritatis beatae voluptate, temporibus modi quisquam adipisci repellendus nostrum, culpa sapiente fugiat aliquid, sunt deleniti.</p>
<p class="about-content">Architecto repudiandae eaque voluptatibus rem voluptatum veritatis debitis cumque repellat doloribus molestias, officiis soluta quo vitae esse minus quisquam est deleniti porro quia consequatur. Ad libero voluptatibus provident maiores quaerat?</p>
<p class="about-content">Enim eaque mollitia perferendis nesciunt voluptates, aut voluptatum illo ad, accusantium officia iusto ipsam natus totam deleniti cupiditate nihil culpa quibusdam laudantium soluta molestias! Facilis doloremque odio iste dolores provident!</p>
<p class="about-content">Eum a rerum hic, sequi assumenda nostrum facere sit atque, delectus porro quibusdam doloribus dolore? Excepturi alias consequatur minus ipsam, natus voluptatem sunt temporibus eligendi eos expedita. Mollitia magni, ex?</p>
<p class="about-content">Reiciendis, incidunt exercitationem, voluptatum quasi atque, aspernatur beatae, sed a voluptatem praesentium amet quisquam itaque nemo impedit accusamus minus ducimus laboriosam omnis saepe? Libero repellat quam nobis, aperiam at saepe.</p>
<p class="about-content">Minus facere optio veritatis aliquid temporibus quidem voluptatem asperiores rerum? Alias earum dignissimos, tenetur, aspernatur saepe ullam sapiente sint cupiditate cum voluptates vitae natus magnam, repudiandae perspiciatis ea! Et, molestias.</p>
</div>
</div>
</div>
</div>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
I'm not sure what I'm doing wrong, can anybody please help me find a solution? I have set up my demo here: http://codepen.io/kazera/pen/KNrXxB
Thanks!
You have mistake here
<div class="col-xs-12 col-md-8">
Change it to to
<div class="col-xs-6 col-md-8">
Related
I've just started learning CSS, so I made was trying to make a website.
It looks fine on pc. But there's this unwanted space on the right side when I resize the browser or load the website on my phone.
I think the problem lies in my CSS's navbar where I used display type "flex". But nothing I do fixes the problem.
Here's 2 screenshots I took.
1
2
body{margin: 0em; padding: 0em;
font-family: Calibri;
color: white;
background-color: black;
height: 100%;
width: 100%;}
.backgroundimage
{height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)),
url(https://rohitgejje.github.io/onepiecesample/images/onepiece.jpg);
z-index: -1;
background-size: cover;
}
/*--------------I think the problem lies here------------------------*/
.navbar {padding: 1em;
background: linear-gradient(rgba(0, 0, 0, 0.6)40%, rgba(0, 0, 0, 0));}
.navbar>nav>ul>img {margin-right: 1em;
margin-left: 1em;}
.navbar>nav>ul {display: flex;}
.navbar>nav>ul>li {display: block;
margin: auto;}
.link {text-decoration: none;
color: rgb(255, 255, 255);
font-size: 1.25em;
padding: 1em;}
/*---------------------------------------------------------------------*/
.hugelogo {text-align: center;}
.news {text-align: center;}
.news>ul {display: flex;}
.news>ul>li {display:block; margin: auto;}
.about>h1 {text-align: center;}
.about>p {margin: 2em;}
.membershome {text-align: center;}
.membershome>ul {display: flex;}
.membershome>ul>li {display: block;
margin: auto;}
.galleryhome {text-align: center;}
.galleryhome>img {margin: 0.5em;}
.historyhome {text-align: center;
margin-top: 3rem;}
/* javascript starts here*/
.link:hover {background: radial-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0)75%);
border-radius: 10%;}
<!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>Straw Hat Pirates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="backgroundimage"></div>
<header class="header">
<div class="navbar">
<nav>
<ul>
<img src="https://unsplash.it/100/40" alt="logo" class="logonav">
<li >Home</li>
<li >Gallery</li>
<li >History</li>
<li >Login</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="hugelogo">
<img src="https://unsplash.it/400/225" alt="logo" class="bigimghome">
</div>
<div class="news">
<h3>News</h3>
<ul>
<li>update1</li>
<li>update2</li>
<li>update3</li>
<li>update4</li>
<li>update5</li>
<li>update6</li>
</ul>
</div>
<div class="about">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut dolor et excepturi quia temporibus vero nisi?
Qui iste beatae dolorum explicabo? Velit quia ipsa voluptates
ea nemo veritatis amet aperiam modi aliquid expedita assumenda
neque, vel nihil, incidunt nam nesciunt illo consequatur eum
possimus numquam fuga. Mollitia repellendus iure, soluta illum
sapiente perspiciatis architecto beatae accusamus ad ut dolor
at est delectus non dolores neque quasi, vel eligendi libero
porro aliquam corporis veniam similique? Laudantium nulla quae
architecto, facere cumque culpa excepturi placeat quia quidem
ipsum. Veniam deleniti autem voluptas molestias suscipit
reprehenderit possimus iure. Cupiditate a odit quidem. Nam
molestiae odio quos esse iure deleniti voluptatum magnam
rerum laudantium? Molestias ullam itaque, expedita
blanditiis quasi asperiores dolores numquam similique error,
laboriosam necessitatibus. Quos soluta officiis doloremque,
harum quibusdam voluptas. Quia quisquam nulla laboriosam
necessitatibus laudantium sunt recusandae corrupti tempore, nisi
assumenda, accusantium, culpa quas? Dignissimos numquam reiciendis possimus
facere.</p>
</div>
<div class="membershome">
<h2>Members</h2>
<ul>
<li class="memberhome">member1</li>
<li class="memberhome">member2</li>
<li class="memberhome">member3</li>
<li class="memberhome">member4</li>
<li class="memberhome">member5</li>
<li class="memberhome">member6</li>
</ul>
</div>
<div class="galleryhome">
<h2>Gallery</h2>
<img src="https://www.unsplash.it/100/100" alt="img1">
<img src="https://www.unsplash.it/100/100" alt="img2">
<img src="https://www.unsplash.it/100/100" alt="img3">
<img src="https://www.unsplash.it/100/100" alt="img4">
</div>
<div class="historyhome">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit cum perferendis dolorem magni laboriosam.
Iste cumque, reiciendis distinctio sequi quidem dolore hic
et repellendus deserunt ratione nisi velit provident?
Laudantium.</p>
</div>
</section>
<footer class="footer">
<div class="footer">
<nav>
<ul>
<li>IG</li>
<li>FB</li>
<li>SC</li>
<li>WA</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
Any help is appreciated. Thank you
3:Github link
So what's basically happening here is that your navbar is overflowing your body. While section takes only 100% width in body. So in this condition you have following option:
either add a scrollbar to navbar. (Quick fix)
add flex-wrap:wrap;.(navbar options will arrange themselves on second line, also a quick fix.)
Even expand your background with your navbar.(which I did in following code by setting body width:auto; which is 100% by default, now in mobile devices your website will look like just aa minimized version of pc site, Won't say its a good thing but if you want to make it work you have to work with media queries. which is to like write whole code)
Add a collapsing menu.(again media queries and code for creating collapsing navbar)
body{margin: 0em; padding: 0em;
font-family: Calibri;
color: white;
background-color: black;
height: 100%;
width: auto;}
.backgroundimage
{height: 100%;
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)),
url(https://rohitgejje.github.io/onepiecesample/images/onepiece.jpg);
z-index: -1;
background-size: cover;
}
/*--------------I think the problem lies here------------------------*/
.navbar {padding: 1em;
background: linear-gradient(rgba(0, 0, 0, 0.6)40%, rgba(0, 0, 0, 0));}
.navbar>nav>ul>img {margin-right: 1em;
margin-left: 1em;}
.navbar>nav>ul {display: flex;}
.navbar>nav>ul>li {display: block;
margin: auto;}
.link {text-decoration: none;
color: rgb(255, 255, 255);
font-size: 1.25em;
padding: 1em;}
/*---------------------------------------------------------------------*/
.hugelogo {text-align: center;}
.news {text-align: center;}
.news>ul {display: flex;}
.news>ul>li {display:block; margin: auto;}
.about>h1 {text-align: center;}
.about>p {margin: 2em;}
.membershome {text-align: center;}
.membershome>ul {display: flex;}
.membershome>ul>li {display: block;
margin: auto;}
.galleryhome {text-align: center;}
.galleryhome>img {margin: 0.5em;}
.historyhome {text-align: center;
margin-top: 3rem;}
/* javascript starts here*/
.link:hover {background: radial-gradient( rgba(0,0,0,0.5), rgba(0,0,0,0)75%);
border-radius: 10%;}
<!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>Straw Hat Pirates</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="backgroundimage"></div>
<header class="header">
<div class="navbar">
<nav>
<ul>
<img src="https://unsplash.it/100/40" alt="logo" class="logonav">
<li >Home</li>
<li >Gallery</li>
<li >History</li>
<li >Login</li>
</ul>
</nav>
</div>
</header>
<section>
<div class="hugelogo">
<img src="https://unsplash.it/400/225" alt="logo" class="bigimghome">
</div>
<div class="news">
<h3>News</h3>
<ul>
<li>update1</li>
<li>update2</li>
<li>update3</li>
<li>update4</li>
<li>update5</li>
<li>update6</li>
</ul>
</div>
<div class="about">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Ut dolor et excepturi quia temporibus vero nisi?
Qui iste beatae dolorum explicabo? Velit quia ipsa voluptates
ea nemo veritatis amet aperiam modi aliquid expedita assumenda
neque, vel nihil, incidunt nam nesciunt illo consequatur eum
possimus numquam fuga. Mollitia repellendus iure, soluta illum
sapiente perspiciatis architecto beatae accusamus ad ut dolor
at est delectus non dolores neque quasi, vel eligendi libero
porro aliquam corporis veniam similique? Laudantium nulla quae
architecto, facere cumque culpa excepturi placeat quia quidem
ipsum. Veniam deleniti autem voluptas molestias suscipit
reprehenderit possimus iure. Cupiditate a odit quidem. Nam
molestiae odio quos esse iure deleniti voluptatum magnam
rerum laudantium? Molestias ullam itaque, expedita
blanditiis quasi asperiores dolores numquam similique error,
laboriosam necessitatibus. Quos soluta officiis doloremque,
harum quibusdam voluptas. Quia quisquam nulla laboriosam
necessitatibus laudantium sunt recusandae corrupti tempore, nisi
assumenda, accusantium, culpa quas? Dignissimos numquam reiciendis possimus
facere.</p>
</div>
<div class="membershome">
<h2>Members</h2>
<ul>
<li class="memberhome">member1</li>
<li class="memberhome">member2</li>
<li class="memberhome">member3</li>
<li class="memberhome">member4</li>
<li class="memberhome">member5</li>
<li class="memberhome">member6</li>
</ul>
</div>
<div class="galleryhome">
<h2>Gallery</h2>
<img src="https://www.unsplash.it/100/100" alt="img1">
<img src="https://www.unsplash.it/100/100" alt="img2">
<img src="https://www.unsplash.it/100/100" alt="img3">
<img src="https://www.unsplash.it/100/100" alt="img4">
</div>
<div class="historyhome">
<h2>History</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing
elit. Suscipit cum perferendis dolorem magni laboriosam.
Iste cumque, reiciendis distinctio sequi quidem dolore hic
et repellendus deserunt ratione nisi velit provident?
Laudantium.</p>
</div>
</section>
<footer class="footer">
<div class="footer">
<nav>
<ul>
<li>IG</li>
<li>FB</li>
<li>SC</li>
<li>WA</li>
</ul>
</nav>
</div>
</footer>
</body>
</html>
I am facing some issue with Bootstrap navbar. I am using Bootstrap v5.0.
Whenever the bootstrap navbar expands, the contents below it is also going down. I don't want that. I want the content not to go down.
I set the position: fixed but it didn't work and behaved abnormally. I want the nav to be fixed at the top.
Full code:
<!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">
<link rel="icon" href="./images/favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
header {
background: linear-gradient(rgba(45, 44, 48, 0.753), rgba(45, 44, 48, 0.753)), url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
/* .navbar {
position: fixed;
} */
#header-texts {
height: 90vh;
align-items: center;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="container">
<div class="row">
<div class="col">
<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">YOUR FAVORITE SOURCE OF FREE<br>BOOTSTRAP THEMES</p>
<hr class="mb-4" style="width: 5%; margin: auto; height: 5px; border: none; color: #ff0000; background-color:#ff0000; opacity: 1;">
<p id="header-texts-2">Start Bootstrap can help you build better websites using the Bootstrap<br>framework! Just download a theme and start customizing, no strings attached!</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<div class="sec-2">
architecto similique rerum, laborum impedit pariatur repudiandae iusto ducimus soluta inventore quibusdam excepturi. Hic similique autem iure distinctio incidunt beatae cupiditate? Repudiandae, iusto eius quo cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam ad velit, dolor explicabo. Nihil adipisci eligendi dolorem est, voluptatem velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae quaerat illo ipsum optio. Minus sequi excepturi nulla eligendi fuga, eius laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum est! Repellendus facere tempora placeat illum hic nemo, nostrum omnis, numquam enim deleniti a, pariatur laboriosam fugiat dignissimos perspiciatis? Dignissimos excepturi eos nostrum provident, beatae libero ex tenetur, a repellendus soluta voluptas, delectus fugiat mollitia laboriosam veniam deserunt quas eaque! Magnam, minus id! Deleniti nemo nam, sint nihil alias similique vero maxime magnam iure! Temporibus odio aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque blanditiis esse ea. Facere harum ad ut commodi ipsum, explicabo excepturi. Suscipit expedita explicabo deleniti repellat! Quisquam est praesentium aspernatur excepturi, ipsum ullam vel sit ad esse pariatur asperiores, omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod distinctio? Illum, ea iusto ad deserunt nihil deleniti voluptate ratione non neque cupiditate esse necessitatibus magnam! Tempora repellat, fugit explicabo delectus quos excepturi, aut nam incidunt eius voluptas non harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla, temporibus incidunt alias commodi inventore error eligendi libero ea atque.
</div>
<!-- ========================= JavaScript ========================= -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
To fix the header you can simply use
.navbar {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
But in that case your main content will go beneath the header, to fix that add a top margin of YOUR_HEADER_HEIGHT to the main content, something like this
#header-texts {
margin-top: 60px; // your header height
height: 90vh;
align-items: center;
}
I have made some changes to you code. What I have done is wrapping your nav component in a navbar-holder class and adding necessary styles to the class which you can find in the code. Another suggestion from my side would be whenever you are going to scroll you should add another style to the navbar like adding a dark background because currently your navabr background is transparent and it would not look good when scrolled.
<!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" />
<link rel="icon" href="./images/favicon.ico" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
crossorigin="anonymous"
/>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
text-decoration: none;
list-style: none;
}
.navbar-holder {
position: fixed;
top: 0;
width: 100%;
}
.with-bg {
background: #000000 !important;
}
header {
background: linear-gradient(
rgba(45, 44, 48, 0.753),
rgba(45, 44, 48, 0.753)
),
url(./images/bg-masthead.jpg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
color: white;
font-weight: bold;
}
.navbar-brand {
font-size: 20px;
}
/* .navbar {
position: fixed;
} */
#header-texts {
height: 90vh;
align-items: center;
}
#header-texts-1 {
font-size: 55px;
}
#header-texts-2 {
font-size: 20px;
font-weight: normal;
}
#header-btn {
background: #f24516;
color: white;
padding: 15px 20px;
border-radius: 30px;
letter-spacing: 0.8px;
}
/* ========================= Responsive ========================= */
#media (max-width: 540px) {
#header-texts-1 {
font-size: 30px;
}
#header-texts-2 {
font-size: 16px;
}
}
#media (min-width: 992px) {
.container {
width: 100vw !important;
}
.navbar-expand-lg {
background: transparent !important;
}
a {
color: white !important;
}
}
</style>
<title>Creative</title>
</head>
<body>
<header>
<div class="navbar-holder" id="navigation-holder">
<nav
class="navbar navbar-expand-lg navbar-light bg-light"
id="navigation"
>
<div class="container-fluid">
<a class="navbar-brand" href="#">Start Bootstrap</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-end"
id="navbarNavAltMarkup"
>
<div class="navbar-nav" id="nav-items">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">About</a>
<a class="nav-link" href="#">Services</a>
<a class="nav-link" href="#">Protfolio</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col"></div>
</div>
<div class="row text-center" id="header-texts">
<div class="col">
<p id="header-texts-1">
YOUR FAVORITE SOURCE OF FREE<br />BOOTSTRAP THEMES
</p>
<hr
class="mb-4"
style="
width: 5%;
margin: auto;
height: 5px;
border: none;
color: #ff0000;
background-color: #ff0000;
opacity: 1;
"
/>
<p id="header-texts-2">
Start Bootstrap can help you build better websites using the
Bootstrap<br />framework! Just download a theme and start
customizing, no strings attached!
</p>
<button class="btn mt-4" id="header-btn">FIND OUT MORE</button>
</div>
</div>
</div>
</header>
<div class="sec-2">
architecto similique rerum, laborum impedit pariatur repudiandae iusto
ducimus soluta inventore quibusdam excepturi. Hic similique autem iure
distinctio incidunt beatae cupiditate? Repudiandae, iusto eius quo
cupiditate facere, dolore assumenda impedit iste ipsam distinctio magnam
ad velit, dolor explicabo. Nihil adipisci eligendi dolorem est, voluptatem
velit dicta illum amet delectus voluptatibus fuga nesciunt recusandae
quaerat illo ipsum optio. Minus sequi excepturi nulla eligendi fuga, eius
laborum dolorum maxime quo, optio ipsa eos, nostrum omnis illum voluptatum
est! Repellendus facere tempora placeat illum hic nemo, nostrum omnis,
numquam enim deleniti a, pariatur laboriosam fugiat dignissimos
perspiciatis? Dignissimos excepturi eos nostrum provident, beatae libero
ex tenetur, a repellendus soluta voluptas, delectus fugiat mollitia
laboriosam veniam deserunt quas eaque! Magnam, minus id! Deleniti nemo
nam, sint nihil alias similique vero maxime magnam iure! Temporibus odio
aspernatur dignissimos hic rerum sed reiciendis, maxime minus adipisci
ullam, aliquam veritatis, explicabo nobis reprehenderit iusto doloremque
blanditiis esse ea. Facere harum ad ut commodi ipsum, explicabo excepturi.
Suscipit expedita explicabo deleniti repellat! Quisquam est praesentium
aspernatur excepturi, ipsum ullam vel sit ad esse pariatur asperiores,
omnis incidunt minima similique eos quod sed. Veritatis laboriosam quod
distinctio? Illum, ea iusto ad deserunt nihil deleniti voluptate ratione
non neque cupiditate esse necessitatibus magnam! Tempora repellat, fugit
explicabo delectus quos excepturi, aut nam incidunt eius voluptas non
harum? Voluptate dolor aspernatur ut officiis laudantium odit odio nulla,
temporibus incidunt alias commodi inventore error eligendi libero ea
atque.
</div>
<!-- ========================= JavaScript ========================= -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
crossorigin="anonymous"
></script>
<script>
document.addEventListener("scroll", () => {
const { scrollTop } = document.documentElement;
const nav = document.querySelector("#navigation-holder");
if (scrollTop === 0) {
nav.classList.remove("with-bg");
} else {
nav.classList.add("with-bg");
}
});
</script>
</body>
</html>
I am trying to create a grid layout with 2 columns and 3 rows but I'm unsure of how to position the grid items so that they are equal in dimension in their own respected areas (so that they aren't overlapping or taking up more space than needed). I've tried changing the sizes of the columns and rows using fr's and %'s but nothing seems to be working. Any help is greatly appreciated as I am relatively new to css. Below are my html and css files.
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 20% 20% 25%;
grid-template-areas: "health-pic health-text" "fitness-text fitness-pic" "mind-pic mind-text";
grid-gap: 20px;
}
.health-text {
grid-area: health-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-top: 60px;
background-color: white;
height: 65vh;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
.health-text h2 {
margin-bottom: 15px;
}
.health-index {
overflow: hidden;
}
.left-pic {
grid-area: health-pic;
margin-top: 20px;
}
.right-pic {
grid-area: fitness-pic;
}
.fitness-text {
grid-area: fitness-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-top: 60px;
background-color: white;
height: 53vh;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
.fitness-text h2 {
margin-bottom: 15px;
}
.mind-pic {
grid-area: mind-pic;
margin-bottom: 300px;
}
.mind-text {
grid-area: mind-text;
font-family: 'Roboto Condensed', sans-serif;
text-align: center;
font-size: 1.2rem;
margin-bottom: 145px;
margin-top: 60px;
background-color: white;
padding: 2em;
border-radius: .3em;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght#1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="/css/style.css">
<title>Fred Ford | Health and Nutrition</title>
</head>
<body>
<!--Navbar-->
<div class="navbar">
<div class="container flex">
<h1 id="logo">Fred Ford</h1>
<nav>
<ul>
<li>Home</li>
<li>About Me</li>
<li>Services</li>
<li>Blog</li>
</ul>
</nav>
</div>
</div>
<section class="landing">
<h2 class="big-text">"Don't limit your challenges. <br> Challenge your limits." - Jerry Dunn</h2>
<div class="landing-pic">
<img src="/img/landing-pic.jpg" alt="Woman stadning on cliff during daytime">
</div>
</section>
<section class="grid">
<div class="health-index">
<img class="left-pic" src="/img/index-health.jpg" alt="Assorted healthy foods">
</div>
<div class="health-text">
<h2>The Importance of Health</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat possimus consectetur error voluptates esse saepe quod quibusdam fuga maiores. Veniam, ea! Quod nesciunt libero, placeat atque suscipit excepturi eius blanditiis soluta sunt tempora
possimus quaerat harum dolorem, id fugiat minima inventore exercitationem dolor dignissimos. Enim laboriosam animi minus facere! Officiis facilis nobis iste itaque ipsam aperiam modi, provident consequatur pariatur laudantium fugit doloribus?
Veritatis deleniti amet nesciunt rem dolor impedit reprehenderit. Eligendi enim quos quibusdam assumenda praesentium dolore, pariatur sint cum consequatur rem non expedita quisquam ab earum cumque magnam sunt laborum necessitatibus magni ducimus
id itaque. Itaque, corrupti molestiae!</p>
</div>
<div class="fitness-index">
<img class="right-pic" src="/img/index-fitness.jpg" alt="man working out outside in white t-shirt">
</div>
<div class="fitness-text">
<h2>The Importance of Fitness</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laudantium ipsam, ad aut, optio eos qui quaerat nobis et eum, natus delectus obcaecati! Culpa, voluptatum maiores? Repudiandae necessitatibus voluptatum facilis officia libero dolorem culpa
illum cupiditate, quis sunt dolores quibusdam nesciunt quaerat quasi! Aliquam ratione quam praesentium animi obcaecati inventore ducimus eius aperiam, beatae maxime illum delectus, blanditiis eligendi quisquam molestiae et eum quia a. Similique
magni eaque sequi quaerat? A ducimus enim delectus ea adipisci.</p>
</div>
<div class="mind">
<img class="mind-pic" src="/img/index-mind.jpg" alt="Man sitting on rock near ocean water">
</div>
<div class="mind-text">
<h2>The Power and Nature of the Mind</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ut, quae fuga eligendi, ipsum sequi ex molestiae quisquam iure veritatis iste ipsa nulla deserunt voluptas doloremque exercitationem voluptatibus odio ea repellendus illo natus! In ea consequatur
excepturi minus alias cum assumenda commodi voluptatum necessitatibus vitae possimus ex qui sequi delectus facilis dolores, laboriosam nemo nam facere. Eos, explicabo porro cum nulla laudantium culpa id? Ipsam ut expedita incidunt, laborum vel
nihil iure sapiente libero eius assumenda rem, animi laudantium ullam! Et, alias cupiditate culpa velit rem optio nemo tempora facilis vero sequi minus itaque, temporibus facere?.</p>
</div>
</section>
<!--Footer-->
<section>
<div class="footer">
<ul>
<li><i class="fa fa-facebook"></i></li>
<li><i class="fa fa-instagram"></i></li>
<li><i class="fa fa-twitter"></i></li>
</ul>
</div>
</section>
</body>
</html>
I think you can change from
grid-template-rows: 20% 20% 25%
to
grid-template-rows: 1fr 1fr 1fr;
Using 1fr for each row and columns mean they are going to have equal size
Previously you had the rows in 20% 20% 25% to translate this to fr in units it means 4fr 4fr 5fr
The fr unit is counted as the ratio of one of the row or column to the total fr
in the case of 4fr 4fr 5fr
The first row have a ratio of 4/13, the row column also have 4/13, while the last one is different which is 5/13
This means the height of each row will be different
When you do 1fr on each row it means the ratio of each row will be 1/3 so it will be equal in size
Hope I helped you there
EDIT:
.health-index {
grid-area: health-pic; /* add this line */
overflow: hidden;
}
.fitness-index {
grid-area: fitness-pic; /* this one as well */
}
You didn't specify which grid area the images belong to so it causes the image to span larger than the provided grid as it is not part of the grid
I am trying to create a web page where I have a margin of 50px fixed left and right where the page images have an index that makes it closer to the screen and the margin looks farther off.I also want to achieve a fixed footer like I have for the navigation bar.I tried setting margin left and right to 50px and setting them to a fixed position and tried using the wrapper class to add to the sections both did not yield desired result.
Here is my code below
HTML CODE:
<!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>Archers</title>
<link rel="stylesheet" href="arch.css">
</head>
<body>
<section id="main">
<div class="bg1">
<header>
<div id="navbar">
<nav class="nav-list">
<ul class="ul-style ">
<li>OUR PORTFOLIO</li>
<li>OUR PROCESS</li>
<li>ABOUT</li>
<li>HOME</li>
</ul>
</div>
</header>
</div>
</div>
</section>
<section id="about">
<div class="bg1">
<div class="about_us">
<a name="#about">
<p>
<h1>ABOUT US</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
<section id="process">
<div class="bg1>
<div class=" our_process">
<a name="#process">
<p>
<h1>OUR PROCESS</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="bg1">
<div class="our_portfolio">
<a name="#portfolio">
<p>
<h1>OUR PORTFOLIO</h1>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima ducimus officia vero, animi dicta magni tenetur praesentium quisquam, iusto itaque distinctio quis blanditiis. Ad quos, voluptate labore aut aspernatur vitae nostrum quaerat
quasi nulla earum incidunt facere dolorum ipsam necessitatibus ex illum hic voluptatibus! Suscipit laborum consectetur numquam neque ratione ullam asperiores adipisci quidem, totam praesentium nisi quisquam at tempora autem earum iste,
itaque
minima. Modi repellendus laudantium quas odio tempora hic similique molestias quia sapiente saepe nobis, vel, nemo impedit delectus. Voluptatum suscipit est, autem laborum, maiores ad nesciunt necessitatibus in neque sunt, ipsam dolorem
rem.
Sit, illum, non.
</p>
</a>
</div>
</div>
</div>
</section>
</section>
<section id="footer">
<footer>
2020 DeborahPalmTree
</footer>
</section>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
CSS CODE
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100vh;
}
#navbar {
width: 100%;
height: 50px;
background-color: rgba(219, 219, 219, 1.0);
position: fixed;
}
nav ul li {
list-style: none;
float: right;
margin: 20px;
}
li a {
text-decoration: none;
color: #ffffff;
}
.bg1 {
background-color:rgba(255,255,255, 0.5);
width:100%;
height:100%;
}
/*.wrapper{
width:50px;
position:fixed;
height:100%;
background-color:rgba(255,255,255,1.0);
opacity:0;
z-index:1;}
}*/
#main {
height: 100%;
width: 100%;
background-image: url('structural-images/img_house_trees.jpg');
background-size: cover;
background-position: bottom;
}
#about {
height: 100%;
width: 100%;
background-image: url('structural-images/img_construction_site.jpg');
background-size: cover;
background-position: bottom;
}
#process {
height: 100%;
width: 100%;
background-image: url('structural-images/img_arc_plan.jpg');
background-size: cover;
background-position: bottom;
}
#portfolio {
height: 100%;
width: 100%;
background-image: url('structural-images/img-structure-garden-car-park.jpg');
background-size: cover;
background-position: bottom;
}
#fixed{
position: fixed;
height :50px;
width:100%;
background-color: rgba(219,219,219,1.0);
}
You did not use the id selector to reference the footer section in your css page, probably you referenced #fixed in place of footer instead, at the bottom of your CSS file.
// use this instead
#footer{
position: fixed;
bottom: 0;
left: 0;
height :50px;
width:100%;
background-color: transparent;
}
You used the same selector on your menu nav, sections and subdivs (#portfiolio),you need to learn how to create layout properly and make use of css selectors properly. you can learn for free on udemy introduction to web design. Their explanation is very good, and also Kenvin Powell introduction to css course on Youtube.
For a quick fix
Get one parent div with 2 children
<div class="parentDiv">
<div class="bgDiv"></div>
<div class="contentDiv></div>
</div>
you can play with the units to get your desired output, assuming the current screen size is 746px
.parentDiv{
width: 646px;
max-width: 100%;
position: relative;
max-width: 100%;
margin: auto;
perspective: 500px;
height: 100%;
}
.bgDiv{
box-shadow: inset -3px -70px 8px 6vw rgba(255, 255, 255, 0.8);
background-image: linear-gradient(rgba(245, 242, 242, 0.44), rgba(255,
255, 255, 0.5)), url(https://placebear.com/500/300);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
z-index: -999;
background-size: cover;
}
.contentDiv{
position: absolute;
z-index: 999;
top: 20px;
left: 50px;
transform: translate3d(25px, 25px, 50px);
padding: 4rem;
}
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.