Pretty confused - I am referring to the .grid2 section I've tried changing all of the classes and making them more or less specific Could this be to do with the grid wrapper on the outside? Strangely the section is going recognizing that there is a 3 column grid but not recognizing the rows (even when i define them) here is the code
HTML:
<!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">
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Powerwashing</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<ul>
<li><a class="a" href="#">About us</a></li>
<li><a class="s" href="#">Services</a></li>
<li> <a class="l"href="#"></a><img src="wash.png" width=100px alt="Powerwashing services">
</a>
</li>
<li><a class="w" href="#">Why us</a></li>
<li><a class="c" href="#">Contact us</a></li>
</ul>
</div>
<div class="grid2">
<section class="se">
<h2>Services</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates minus molestias quaerat laudantium. Ab nihil eius velit nisi tempora quibusdam illo animi esse provident corporis fuga, minima, numquam obcaecati ut atque molestias cum. Tenetur magni adipisci porro eum mollitia, dolor dolorem repellendus aspernatur quibusdam architecto nobis, ab cum, aliquid nulla?
</p>
</section>
<section class="ab">
<h3>About us</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos eligendi, dolor obcaecati. Fuga corporis aliquid possimus, deserunt earum ut quod, quia maxime, optio dolorem laudantium soluta quae omnis pariatur iusto natus veniam rerum labore tenetur veritatis eius deleniti. Qui, tempora.
</p>
</section>
<section class="wh">
<h3>Why us</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nemo exercitationem maiores excepturi vero asperiores, quaerat necessitatibus. Aspernatur, veniam voluptas earum esse rerum, expedita hic in quam alias sunt laudantium quisquam ducimus iste sit iusto quaerat labore molestias saepe quo.
</p>
</section>
</div>
</div>
</body>
</html>
CSS:
*{
margin:0px;
padding:0px;
}
.wrapper{
display: grid;
}
.header ul{
list-style-type: none;
background-color: green;
padding:20px;
text-align: center;
display:grid;
grid-template-columns: repeat(5,1fr);
grid-template-areas:
"a s l w c";
align-items: center;
}
.header a{
background-color: red;
font-size: 20px;
padding:5px;
}
a .a{
grid-area:a;
}
a .s{
grid-area:s;
}
a .l{
grid-area: l;
}
a .w{
grid-area:w;
}
a .c{
grid-area:c;
}
.grid2{
display: grid;
grid-template-columns: repeat(3,1fr);
grid-template-areas:
"se wh wh"
"se ab ab";
}
section .se h3 p{
grid-area: se;
}
section .ab h3{
grid-area: ab;
}
section .wh h3{
grid-area: wh;
}
So it seems that its because i was calling the section tags and each section had a seperate section tag, Im not sure why this wouldnt work though?
Related
main{
flex:1;
}
html{
height: 100%;
}
.flex-bodyContainer{
display: flex;
flex-direction: column;
flex-grow: 1;
height: inherit;
}
body {
font-family: "Lato", "Helvetica Neue", "Helvetica", sans-serif;
margin: 0;
height: inherit;
}
* { box-sizing: border-box; }
.flex-container {
display: flex;
height:100%;
}
.flex-item{
padding: 1em;
}
.flex-item#0{
flex-basis: 240px;
}
.flex-item#1{
flex: 1;
flex-grow: fill;
background-color: #eee;
}
.flex-item#1, .flex-ImageContainer{
display:flex;
flex-wrap: wrap;
justify-content: center;
}
.flex-item#1 .flex-ImageContainer .flex-imageItem{
flex: 0 0 250px;
background-color: white;
margin:0.5rem;
padding: .5rem 1rem;
border-radius: 10px;
box-shadow: 0 1 3px;
}
.flex-item#1 .flex-ImageContainer .flex-item .flex-imageItem p{
padding:0.5rem 1rem;
}
.flex-item#2{
flex-basis: 180px;
flex-shrink: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cards</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- normalize.css for cross-browser stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body class="flex-bodyContainer">
<main>
<div class="flex-container">
<section class="flex-item" id="0">
<h1>Cards</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum ducimus earum amet repudiandae commodi quod distinctio, iste reprehenderit nihil ullam dolorum illo fugit.</p>
</section>
<section class="flex-item" id="1">
<div class="flex-ImageContainer">
<div class="flex-imageItem">
<!-- Card 1 -->
<img src="img/abstract1.jpg" alt="abstract art">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
</div>
<div class="flex-imageItem">
<!-- Card 2 -->
<img src="img/abstract2.jpg" alt="abstract art">
<p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
</div>
<div class="flex-imageItem">
<!-- Card 3 -->
<img src="img/abstract3.jpg" alt="abstract art">
<p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
</div>
<div class="flex-imageItem"></div>
<!-- Card 4 -->
<img src="img/abstract4.jpg" alt="abstract art">
<p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
</div>
<div class="flex-imageItem">
<!-- Card 5 -->
<img src="img/abstract5.jpg" alt="abstract art">
<p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
</div>
</div>
</section>
<section class="flex-item" id="2">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Delectus, aliquid vitae?</li>
<li>Vero, molestias debitis.</li>
<li>Obcaecati, vitae amet?</li>
<li>A, nulla dolore!</li>
<li>Error, nesciunt at.</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
<p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis repudiandae sequi!</p>
<p>Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!</p>
</section>
</div>
</main>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head>
<meta charset="UTF-8">
<title>Cards</title>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- normalize.css for cross-browser stuff -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css"> </head>
Cards
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem, ullam! Provident at accusantium, explicabo odio laborum
ducimus earum amet repudiandae commodi quod distinctio, iste
reprehenderit nihil ullam dolorum illo fugit.
<section class="flex-item" id="1">
<div class="flex-ImageContainer">
<div class="flex-imageItem">
<!-- Card 1 -->
<img src="img/abstract1.jpg" alt="abstract art">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, laborum.</p>
</div>
<div class="flex-imageItem">
<!-- Card 2 -->
<img src="img/abstract2.jpg" alt="abstract art">
<p>Doloremque commodi unde eaque! Et natus dolorum corrupti ut numquam.</p>
</div>
<div class="flex-imageItem">
<!-- Card 3 -->
<img src="img/abstract3.jpg" alt="abstract art">
<p>Odio praesentium cum nemo nesciunt architecto, quam voluptate porro inventore.</p>
</div>
<div class="flex-imageItem"></div>
<!-- Card 4 -->
<img src="img/abstract4.jpg" alt="abstract art">
<p>Dignissimos consequuntur maxime harum debitis ratione, culpa iure pariatur quaerat?</p>
</div>
<div class="flex-imageItem">
<!-- Card 5 -->
<img src="img/abstract5.jpg" alt="abstract art">
<p>Odit id earum commodi tempora voluptatum mollitia dolorum, perspiciatis nulla!</p>
</div>
</div>
</section>
<section class="flex-item" id="2">
<ul>
<li>Lorem, ipsum dolor.</li>
<li>Delectus, aliquid vitae?</li>
<li>Vero, molestias debitis.</li>
<li>Obcaecati, vitae amet?</li>
<li>A, nulla dolore!</li>
<li>Error, nesciunt at.</li>
</ul>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo voluptates sint laudantium quaerat commodi!</p>
<p>Aliquam, harum cumque aspernatur consectetur tempore dicta explicabo facere, adipisci sunt quas perferendis
repudiandae sequi!
Dolore aut error distinctio! Nemo impedit ipsum sunt neque vel enim unde incidunt nam consequuntur!
I'm new to programming and I would appreciate some help.
I have the code on codepen.
Here is the codepen link:https://codepen.io/Oblivion37/pen/LYzZEmN;
I had to use two media queries because I didn't know how to do it in a different way to be responsive and decent-looking. Before that, I tried to put just one media query with the display of block, but then I couldn't specify a gap xd.
The 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" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
background: rgb(206, 195, 195);
flex-basis: 30%;
}
.container {
display: flex;
justify-content: space-between;
max-width: 70rem;
}
header {
display: flex;
justify-content: center;
}
#media (max-width: 40em) {
.container {
display: flex;
flex-direction: column;
}
}
#media (max-width: 40em) {
.text {
margin-bottom: 3em;
}
}
</style>
</head>
<body>
<header>
<div class="container">
<div class="text">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab sapiente
harum nam qui voluptate soluta reiciendis repudiandae quibusdam
voluptatem. Nisi harum voluptatem quaerat dicta quae labore error, id
asperiores architecto, distinctio cupiditate repellat repellendus,
debitis voluptates ipsum recusandae omnis corrupti!i harum voluptatem
quaerat dicta quae labore error, id asperiores architecto, distinctio
cupiditate repellat repellendus, debitis voluptates ipsum rei harum
voluptatem quaerat dicta quae labore error, id asperiores architecto,
distinctio cupiditate repellat repellendus, debitis voluptates ipsum
rei harum voluptatem quaerat dicta quae labore error, id asperiores
architecto, distinctio cupiditate repellat repellendus, debitis
voluptates ipsum re
</div>
<div class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Atque
consectetur beatae illum amet praesentium laboriosam officia, eligendi
cupiditate repudiandae, alias quia id odio accusamus. Laudantium?
</div>
<div class="text">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quo facilis,
sapiente mollitia itaque et, vel est repudiandae neque voluptatum quis
qui nulla ullam ea. Nihil natus est similique aliquid velit.
</div>
</div>
</header>
</body>
</html>
The last part of your CSS can be reduced to:
#media (max-width: 40em) {
.container {
flex-direction: column;
}
.text {
margin-bottom: 3em;
}
}
(Note: display: flex is inherited from the regular CSS rules, and you don't need to have separate media queries if the condition is identical.)
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 have some blocks with goods and there are different descriptions with different amounts of text and I need to center it. The button "add to cart" must be in one line not depends how many symbols in description I have. Not pure css solution welcomed (Just not jQuery solutions).
The solution with curtain height does not fit!
(Space must be between description and button "add to cart").
.parent {
border: medium dashed green;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.child {
align-self: stretch;
border: medium dashed #c4c4c4;
background-color: #fedba9;
width: 40%;
}
.button {
max-width: 350px;
max-height: 50px;
background-color: coral;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
max-width: 300px;
}
<!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>Document</title>
<link rel="stylesheet" href="/test.css" />
</head>
<body>
<div class="parent">
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident voluptatibus repudiandae vitae eos, debitis eligendi rem voluptate atque iusto quo nam impedit quia tempore aperiam ducimus asperiores, odit molestiae nemo!
</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia accusamus dolorem, sint atque culpa eum aspernatur earum eaque nesciunt minima aliquid omnis, cum iure veritatis voluptatum nam distinctio eligendi. Fuga voluptatibus reiciendis,
laudantium dignissimos harum modi voluptatum, ipsa a ad possimus cum accusamus. Ea alias ipsum laboriosam tempora sapiente, molestiae incidunt reprehenderit maiores perferendis earum. Ut dolorem suscipit at? Laboriosam corporis dolorem, est doloribus
ullam ut accusantium, amet voluptate beatae vitae deleniti nihil consequuntur non labore, nobis ipsum? Sapiente earum praesentium, quasi voluptas doloremque distinctio. Veniam soluta perspiciatis porro! Fugit excepturi, perferendis expedita cum
officiis autem eum, perspiciatis quisquam, vero ipsum ea. Odit animi sed nesciunt officiis impedit ex, in autem id quis, dolorum corporis eum cupiditate itaque repellat.
</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>2342342 23423423 23423423</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>123123 12312</p>
<div class="button">add to cart</div>
</div>
</div>
</body>
</html>
Use flex in direction column on your .child item
Make the p inside grow to fill all remaining space
Make it itself a flex to have text easily centered within
.parent {
border: medium dashed green;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.child {
align-self: stretch;
border: medium dashed #c4c4c4;
background-color: #fedba9;
width: 40%;
display: flex;
flex-direction: column;
}
.child p {
flex-grow: 1;
display: flex;
align-items: center;
}
.button {
max-width: 350px;
max-height: 50px;
background-color: coral;
margin: 0 auto;
}
img {
display: block;
margin: 0 auto;
max-width: 300px;
}
<!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>Document</title>
<link rel="stylesheet" href="/test.css" />
</head>
<body>
<div class="parent">
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident voluptatibus repudiandae vitae eos, debitis eligendi rem voluptate atque iusto quo nam impedit quia tempore aperiam ducimus asperiores, odit molestiae nemo!
</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit mollitia accusamus dolorem, sint atque culpa eum aspernatur earum eaque nesciunt minima aliquid omnis, cum iure veritatis voluptatum nam distinctio eligendi. Fuga voluptatibus reiciendis,
laudantium dignissimos harum modi voluptatum, ipsa a ad possimus cum accusamus. Ea alias ipsum laboriosam tempora sapiente, molestiae incidunt reprehenderit maiores perferendis earum. Ut dolorem suscipit at? Laboriosam corporis dolorem, est doloribus
ullam ut accusantium, amet voluptate beatae vitae deleniti nihil consequuntur non labore, nobis ipsum? Sapiente earum praesentium, quasi voluptas doloremque distinctio. Veniam soluta perspiciatis porro! Fugit excepturi, perferendis expedita cum
officiis autem eum, perspiciatis quisquam, vero ipsum ea. Odit animi sed nesciunt officiis impedit ex, in autem id quis, dolorum corporis eum cupiditate itaque repellat.
</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>2342342 23423423 23423423</p>
<div class="button">add to cart</div>
</div>
<div class="child">
<img src="https://ogden_images.s3.amazonaws.com/www.observertoday.com/images/2020/08/29003327/SUNSET-579x840.jpg" alt="" />
<p>123123 12312</p>
<div class="button">add to cart</div>
</div>
</div>
</body>
</html>
Added display: flex; and justify-content: space-between; on the .child element will move the elements equally apart.
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