I've prepared three containers on the body. Header, main, and footer. The main uses a grid and contains a couple of children. The problem is that lower children are overflowing a container in height and in this case also they overflowing a footer.
The more elements I have, the more overflow is.
My goal is for "main" contains child elements without overflow.
I also would be appreciated for an explanation, why the main don't authorize automatically height having regard to I don't have any fixed size.
You can check, how it's working now on codepen:
https://codepen.io/kornavol/pen/gOLXKKo
body {
width: 80%;
text-align: center;
margin: auto;
}
.grid-container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
gap: 3%;
margin: 20px auto 20px
}
.card {
box-shadow: 0 0 20px #777;
border-radius: 25px;
text-align: center;
}
.card>img {
width: 100%;
height: 40%;
object-fit: cover;
border-radius: 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.card>a {
text-decoration: none;
color: black;
}
.card>a>h4 {
width: 100px;
background-color: rgb(255, 150, 22);
border-radius: 5px;
margin: auto;
}
.banner {
width: 100%;
height: 20vw;
object-fit: cover;
}
header>h1 {
height: 60px;
line-height: 60px;
border-left: 10px solid #00ffff;
background-color: rgb(96, 104, 111);
border-top-right-radius: 15px;
color: white;
}
footer>img {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
footer>h1 {
height: 60px;
line-height: 60px;
border-left: 10px solid #00ffff;
background-color: rgb(96, 104, 111);
border-radius: 0;
border-bottom-left-radius: 15px;
color: white;
}
<div id="root">
<div class="App">
<header>
<h1>Welcome on My Store</h1><img class="banner" style="border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;" src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Something went wrong! Please try again later." title="How's the scene">
</header>
<main class="grid-container">
<div class="card"><img src="https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=966&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Iphone</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1100</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1593642632505-1f965e8426e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=925&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Samsung</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1200</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1550029402-226115b7c579?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Huawei</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1300</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1491933382434-500287f9b54b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Nokia</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1400</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1516163109866-e9d98630a0a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Pixel</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1500</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1572797258555-4f33f86f443f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1048&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1600</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
</main>
<footer><img class="banner" style="border-top-left-radius: 25px; border-top-right-radius: 25px;" src="https://images.unsplash.com/photo-1542581509-7e87190743b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Something went wrong! Please try again later." title="How's the scene">
<p>- 2021 -</p>
<h1 class="la">We're looking forward to see you again</h1>
</footer>
</div>
</div>
The gap: 3% rule in the container is causing the main element to overflow the footer.
Try using grid-column-gap: 3% instead. You can add the remaining gaps to the grid items themselves: .card { margin: 10px }
OR, do the math so that the gap property can work on its own in the container.
body {
width: 80%;
text-align: center;
margin: auto;
}
.grid-container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr);
grid-column-gap: 3%; /* adjustment */
margin: 20px auto 20px
}
.card {
margin: 10px; /* new */
box-shadow: 0 0 20px #777;
border-radius: 25px;
text-align: center;
}
.card>img {
width: 100%;
height: 40%;
object-fit: cover;
border-radius: 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.card>a {
text-decoration: none;
color: black;
}
.card>a>h4 {
width: 100px;
background-color: rgb(255, 150, 22);
border-radius: 5px;
margin: auto;
}
.banner {
width: 100%;
height: 20vw;
object-fit: cover;
}
header>h1 {
height: 60px;
line-height: 60px;
border-left: 10px solid #00ffff;
background-color: rgb(96, 104, 111);
border-top-right-radius: 15px;
color: white;
}
footer>img {
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
footer>h1 {
height: 60px;
line-height: 60px;
border-left: 10px solid #00ffff;
background-color: rgb(96, 104, 111);
border-radius: 0;
border-bottom-left-radius: 15px;
color: white;
}
<div id="root">
<div class="App">
<header>
<h1>Welcome on My Store</h1><img class="banner" style="border-bottom-left-radius: 25px; border-bottom-right-radius: 25px;" src="https://images.unsplash.com/photo-1472851294608-062f824d29cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Something went wrong! Please try again later." title="How's the scene">
</header>
<main class="grid-container">
<div class="card"><img src="https://images.unsplash.com/photo-1512499617640-c74ae3a79d37?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=966&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Iphone</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1100</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1593642632505-1f965e8426e9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=925&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Samsung</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1200</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1550029402-226115b7c579?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=701&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Huawei</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1300</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1491933382434-500287f9b54b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Nokia</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1400</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1516163109866-e9d98630a0a6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Pixel</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1500</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
<div class="card"><img src="https://images.unsplash.com/photo-1572797258555-4f33f86f443f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1048&q=80" alt="Something went wrong! Please try again later." title="How's the scene">
<h3>Test</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim, distinctio facilis dolores ullam autem ad commodi.</p>
<h4>Price: $1600</h4>
<a href="">
<h4>Add to Cart</h4>
</a>
</div>
</main>
<footer><img class="banner" style="border-top-left-radius: 25px; border-top-right-radius: 25px;" src="https://images.unsplash.com/photo-1542581509-7e87190743b6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80"
alt="Something went wrong! Please try again later." title="How's the scene">
<p>- 2021 -</p>
<h1 class="la">We're looking forward to see you again</h1>
</footer>
</div>
</div>
is it appropriate that way?
.grid-container {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) ;
grid-template-rows: minmax(0, 1fr);
margin: 20px auto 20px
}
.card {
box-shadow: 0 0 20px #777;
border-radius: 25px;
text-align: center;
display: inline-table;
padding: 3%;
margin: 3%;
}
.card > img {
width: 100%;
height: 40%;
max-height: 250px;
object-fit: cover;
border-radius: 0;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
hello the problem is while assign the values to footer you also have to defined it as a grid so to solve this problem in 3 lines you just have to add a id to footer and declare it
as grid after that just asign top padding to that id
html
css
css #footer{ display: grid; padding-top: 150px;}
Related
I would like to create a line across my page, just under the Breaking News title but it should have the same length as the contents of my Flexbox under it.
What I would like to achieve:
The Breaking News text should also be aligned with my flexbox. Ergo I placed both of them inside the Flexbox. The problem now is that:
for me to get my desired outcome I need to set a fixed width, but this will affect the responsiveness of my side, some content stays hidden when you drag and minimize the browser
if I don't set fixed width, the line takes all the space in my flexbox.
* {
box-sizing: border-box;
font-family: 'Encode Sans', sans-serif;
}
.main-header {
font-weight: 700;
text-align: center;
margin-top: 50px;
margin-bottom: 20px;
font-size: 20;
}
.secondary-header {
text-align: center;
font-size: 10;
margin-top: 0px;
}
.breaking-news-container {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
gap: 25px;
margin-top: 150px;
}
.breaking-news-box {
width: 300px;
height: 400px;
border: 1px black;
border-style: dotted;
}
.breaking-news-images {
width: 100%;
object-fit: contain;
object-position: top;
}
.breaking-news-titles {
padding-right: 15px;
padding-left: 15px;
padding-bottom: 0px;
padding-top: 10px;
margin-top: 15px;
margin-bottom: 0px;
}
.breaking-news-paragraph {
font-size: 12px;
padding-left: 15px;
padding-right: 15px;
}
.first-line {
margin: 0px;
padding: 0px;
}
<div class="breaking-news-title"> Breaking news </div>
<hr class="first-line" />
<div class="breaking-news-container">
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/1025/320/200">
<h3 class="breaking-news-titles">Missing dog found alive after 6 days</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/1048/320/200">
<h3 class="breaking-news-titles">Elon Musk investigated over Twitter deal</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/117/320/200">
<h3 class="breaking-news-titles">Billie Eilish announces Happier That Ever world tour</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
<div class="breaking-news-box">
<img class="breaking-news-images" src="https://picsum.photos/id/160/320/200">
<h3 class="breaking-news-titles">EU approves common charging cable from 2024</h3>
<p class="breaking-news-paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum odit cum. Provodient sin autem se olum ad enim sunt totam?</p>
</div>
</div>
I found something about making the hr a pseudo element but it doesn't work.
Any thoughts?
Desired outcome: I have three columns. I need them to be all the same width, as well as text and buttons to be on the same level in all three of them.
Problem: Depending on the number of words, columns become wider and buttons start to jump when text is resizing, and all three texts are resizing on a different points. I need to prevent that. How can I achieve this?
HTML:
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
CSS:
.sub-offer {
text-align: center;
display: flex;
position: relative;
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
&:hover {
background: #e5e5e5;
}
}
}
How they look now:
You can add a media query to change the flex-direction when the screen resizes.
Add the following indie .sub-offer class.
#media(max-width: 600px){
flex-direction: column;
}
Add the following inside h2 element.
#media(max-width: 600px){
width: 100%;
}
I solved my issue. To give all three columns the same width I've used what #tacoshy recommended in the comments: section.sub-offer { display: flex; } .offer-container { width: calc(100% / 3); }
To align all three buttons though leaving all them responsive I've wrapped my button into a div and used the following css:
.more-btn {
display: flex;
align-self: center;
margin-top: auto;
}
I'm not really a good dev, but I can give it a try. What I do when I want to make things line up perfectly is use grid, so I tried adding it to .offer-container like this .offer-container {display: grid; grid-template-rows: 1fr 1fr 1fr;}. A working example is below. Though, since I'm new to helping people on StackOverflow or really StackOverflow in general, I'm sure I didn't do something right. for example, providing a solution to a different problem or fixing issues that you didn't as for. If you need a list of what I changed, you can see that here: added } for sub-offer removed extra closing bracket on a{} separated &:hover to a:hover{} made <p> text white. I hope this is the solution you were looking for if your problem hasn't already been fixed.
.sub-offer {
text-align: center;
display: flex;
position: relative;
width:100px
}
.offer-container {
background: linear-gradient(to bottom right, #2e2e3b, #0f1519);
display: grid;
grid-template-rows: 1fr 1fr 1fr;
}
h2 {
font-family: 'Playfair Display', serif;
font-size: 15px;
position: absolute;
margin-left: auto;
margin-right: auto;
margin-top: 4.3em;
width: 33%;
text-align: center;
}
p {
font-size: 12px;
margin-top: 2em;
padding: 0 0.5em 0 0.5em;
font-family: 'Montserrat', sans-serif;
color: white;
}
a {
display: inline-block;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
background: white;
margin: 3em 0 2.5em 0;
padding: 0.5em;
text-decoration: none;
color: black;
}
a:hover {
background: #e5e5e5;
}
<section class="sub-offer">
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus a
rerum sapiente odit porro obcaecati fugit, maxime modi veritatis
quis!
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi
perspiciatis voluptas qui iste, voluptatem atque ab rerum illum quia
incidunt odio?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
<div class="offer-container">
<div class="offer-up">
<h2>Lorem, ipsum.</h2>
<img src="https://via.placeholder.com/150x150.png/09f/fff" alt="" />
</div>
<div class="offer-down">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
vitae aut fugit dicta repellendus dolorem, quam, accusamus hic nemo
ullam quod porro atque error?
</p>
</div>
<div class="more-btn">
Lorem, ipsum.
</div>
</div>
</section>
body{
font-family: "Roboto", "Helvetica","Sans-serif";
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
color: #777;
line-height: 1.7;
}
h1,h2{
font-family: "Playfair Display", serif;
font-weight: 500;
}
.agents{
margin-left: 5%;
padding-bottom: 100px;
}
.agents h1{
font-size: 40px;
margin-bottom: -1.5%;
}
.services{
background-color: rgba(221, 218, 218, 0.404);
display: flex;
flex-direction: row;
width: 1400px
}
ion-icon{
font-size: 250%;
color: rgb(255, 162, 40);
margin-top: 15px;
padding-right: 20px;
padding-left: 20px;
}
.about{
margin-top: 5%;
}
.large-paragraph{
font-size: 1.25rem;
font-weight: 300;
}
.about a{
background-color: rgb(255, 162, 40);
text-decoration: none;
color: rgb(255, 255, 255);
padding: 15px 30px;
line-height: 1.5;
font-size: 16px;
border-radius: 30px;
margin-top: 10%;
}
.left img{
width: 55%;
margin-left: 20%;
margin-top: 5%;
padding-bottom: 100px;
}
.profiles{
width: 375px;
margin: 2%;
background-color: rgba(221, 218, 218, 0.616);
}
.profiles img{
width: 100%;
}
h1{
color: rgb(255, 162, 40);
}
.services h1{
font-size: 300%;
}
.about h1{
font-size: 250%;
letter-spacing: 2%;
word-spacing: 2%;
}
h3{
font-family: playfair-display, serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: black;
}
.profile p, .profile h3{
padding-left: 30px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css">
<link rel="stylesheet" href="https://use.typekit.net/hut3eue.css">
</head>
<body>
<section class="agents">
<h1>Agents</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima neque tempora reiciendis.</p>
<div class="row">
<div class="profiles">
<img src="images/person_1.jpg" alt="Kaiara Spencer">
<h3>Kaiara Spencer</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_2.jpg" alt="Dave Simpson">
<h3>Dave Simpson</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_3.jpg" alt="Ben Thompson">
<h3>Ben Thompson</h3>
<small>Real Estate Agent</small>
</div>
</div>
<div class="row">
<div class="profiles">
<img src="images/person_4.jpg" alt="Kyla Stewart">
<h3>Kyla Stewart</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_5.jpg" alt="Rich Moffatt">
<h3>Rich Moffatt</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_6.jpg" alt="Stuart Redman">
<h3>Stuart Redman</h3>
<small>Real Estate Agent</small>
</div>
</div>
</section>
<hr>
<section class="about">
<div class="row">
<div class="left">
<img src="images/property_1.jpg">
</div>
<div class="right">
<h1>We Are the Best Real <br>
Estate Company</h1>
<p class="large-paragraph">Lorem ipsum dolor sit amet consectetur <br>
adipisicing elit.</p>
<p>Est qui eos ratione nostrum excepturi id recusandae fugit <br>
omnis ullam pariatur itaque nisi voluptas impedit Quo suscipit <br>
omnis iste velit maxime.</p>
<ul>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
</ul>
<br/>
<br/>
Learn More
</div>
</div>
</section>
<section class="services">
<h1>Services</h1>
<div class="row">
<div class="box">
<div><ion-icon name="home"></ion-icon></div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br>
consectetur adipisicing elit.<br>
Perferendis quis molestiae vitae
eligendi at.
</p>
Learn More
</div>
</div>
<div class="box">
<div><ion-icon name="home"></ion-icon></div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br>
consectetur adipisicing elit.<br>
Perferendis quis molestiae vitae
eligendi at.
</p>
Learn More
</div>
</div>
<div class="box">
<div><ion-icon name="home"></ion-icon></div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br>
consectetur adipisicing elit.<br>
Perferendis quis molestiae vitae
eligendi at.
</p>
Learn More
</div>
</div>
</div>
</section>
</body>
<script src="https://unpkg.com/ionicons#5.0.0/dist/ionicons.js"></script>
</html>
What I am trying to do is get the flex container "row" in the "services" section to quite literally display as a row but for some reason it is displaying as a column. I'm not allowed to used to use flex grid for this(as a challenge) and I have tried putting it all in another tag to see if that would do anything but nothing seems to be working.
Technically, the '.row' container is not a flex container, so setting the display to flex will automatically solve this problem
.row {
display: flex;
}
Paste the code above in the css
You should also try refactoring your css, the code is a bit unorganized.
For you and others to understand your code better, try using "consistent naming convention", add comments to your code, and style elements in the order of their appearance in the html. Or even more better, have different stylesheets for different components. This would improve your effeciency by .1% (at the least)!!
It looks like you forgot to style your row class:
.row {
display: flex;
flex-direciton: row;
}
Your question is somewhat confusing but if you mean the CONTENTS OF .row of profiles this should work:
(If you mean the rows in the container .agents that is slightly different but perhaps you can build from this?)
body {
font-family: "Roboto", "Helvetica", "Sans-serif";
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 400;
color: #777;
line-height: 1.7;
}
h1,
h2 {
font-family: "Playfair Display", serif;
font-weight: 500;
}
.agents {
margin-left: 5%;
padding-bottom: 100px;
}
.agents h1 {
font-size: 40px;
margin-bottom: -1.5%;
}
.row {
display: flex;
flex-direction: row;
}
.services {
background-color: rgba(221, 218, 218, 0.404);
display: flex;
flex-direction: row;
width: 1400px
}
ion-icon {
font-size: 250%;
color: rgb(255, 162, 40);
margin-top: 15px;
padding-right: 20px;
padding-left: 20px;
}
.about {
margin-top: 5%;
}
.large-paragraph {
font-size: 1.25rem;
font-weight: 300;
}
.about a {
background-color: rgb(255, 162, 40);
text-decoration: none;
color: rgb(255, 255, 255);
padding: 15px 30px;
line-height: 1.5;
font-size: 16px;
border-radius: 30px;
margin-top: 10%;
}
.left img {
width: 55%;
margin-left: 20%;
margin-top: 5%;
padding-bottom: 100px;
}
.profiles {
width: 375px;
margin: 2%;
background-color: rgba(221, 218, 218, 0.616);
}
.profiles img {
width: 100%;
}
h1 {
color: rgb(255, 162, 40);
}
.services h1 {
font-size: 300%;
}
.about h1 {
font-size: 250%;
letter-spacing: 2%;
word-spacing: 2%;
}
h3 {
font-family: playfair-display, serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: black;
}
.profile p,
.profile h3 {
padding-left: 30px;
}
<body>
<section class="agents">
<h1>Agents</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima neque tempora reiciendis.</p>
<div class="row">
<div class="profiles">
<img src="images/person_1.jpg" alt="Kaiara Spencer">
<h3>Kaiara Spencer</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_2.jpg" alt="Dave Simpson">
<h3>Dave Simpson</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_3.jpg" alt="Ben Thompson">
<h3>Ben Thompson</h3>
<small>Real Estate Agent</small>
</div>
</div>
<div class="row">
<div class="profiles">
<img src="images/person_4.jpg" alt="Kyla Stewart">
<h3>Kyla Stewart</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_5.jpg" alt="Rich Moffatt">
<h3>Rich Moffatt</h3>
<small>Real Estate Agent</small>
</div>
<div class="profiles">
<img src="images/person_6.jpg" alt="Stuart Redman">
<h3>Stuart Redman</h3>
<small>Real Estate Agent</small>
</div>
</div>
</section>
<hr>
<section class="about">
<div class="row">
<div class="left">
<img src="images/property_1.jpg">
</div>
<div class="right">
<h1>We Are the Best Real <br> Estate Company</h1>
<p class="large-paragraph">Lorem ipsum dolor sit amet consectetur <br> adipisicing elit.</p>
<p>Est qui eos ratione nostrum excepturi id recusandae fugit <br> omnis ullam pariatur itaque nisi voluptas impedit Quo suscipit <br> omnis iste velit maxime.</p>
<ul>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
<li>Placeat maxime animi minus</li>
</ul>
<br/>
<br/>
Learn More
</div>
</div>
</section>
<section class="services">
<h1>Services</h1>
<div class="row">
<div class="box">
<div>
<ion-icon name="home"></ion-icon>
</div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
</p>
Learn More
</div>
</div>
<div class="box">
<div>
<ion-icon name="home"></ion-icon>
</div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
</p>
Learn More
</div>
</div>
<div class="box">
<div>
<ion-icon name="home"></ion-icon>
</div>
<div>
<h3>Search Property</h3>
<p>Lorem ipsum dolor sit amet<br> consectetur adipisicing elit.<br> Perferendis quis molestiae vitae eligendi at.
</p>
Learn More
</div>
</div>
</div>
</section>
</body>
If you can't use flexbox, use css grid instead.
The old school way of doing things is use float: left on the divs and give width: 33.33333% to them. Or use display inline block with text-align center.
I am following a series of Traversy Media videos for creating a portfolio website. I have a foundational knowledge of HTML/CSS. We have to create a grid and no matter what I do, I cannot get the grid to show up in my browser (Chrome). The grid will be for the About info on the about page. Also the footer isn't showing up for some reason. Any help would be greatly appreciated.
Here is the about.html
<!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">
<script src="https://kit.fontawesome.com/31d2c226f4.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="css/main.css">
<title>About Me</title>
</head>
<body>
<div class="overlay"></div>
<header>
<div class="menu-btn">
<div class="btn-line"></div>
<div class="btn-line"></div>
<div class="btn-line"></div>
</div>
<nav class="menu">
<div class="menu-branding">
<div class="portrait"></div>
</div>
<ul class="menu-nav">
<li class="nav-item">
<a href="/" class="nav-link">
Home
</a>
</li>
<li class="nav-item current">
<a href="about.html" class="nav-link">
About Moi
</a>
</li>
<li class="nav-item">
<a href="work.html" class="nav-link">
My Work
</a>
</li>
<li class="nav-item">
<a href="Contact.html" class="nav-link">
How to Reach Me
</a>
</li>
</ul>
</nav>
</header>
<main id="about">
<h1 class="lg-heading">
About
<span class="text-secondary">Me</span>
</h1>
<h2 class="sm-heading">
Let me tell you a few things...
</h2>
<div class="about-info">
<!-- <img src="img/portrait.jpeg" alt="Alex Gool" class="bio-image"> -->
<div class="bio">
<h3 class="text-secondary">BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dolore at, quasi natus veritatis, amet cum voluptates, iste fugit atque autem laboriosam. Provident officia modi inventore fugit recusandae vitae nisi.</p>
</div>
<div class="job job-1">
<h3>123 Webshop</h3>
<h6>Full Stack Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-2">
<h3>Designers ABC</h3>
<h6>Front End Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-3">
<h3>Webworks</h3>
<h6>Graphic Designer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
</div>
</main>
<footer id="main-footer">
Copyright © 2021
</footer>
<script src="js/main.js"></script>
</body>
</html>
And here is the main SCSS file
// Move variable and functions to _config.scss file. This helps tidy up the main.scss file and makes the code more readable. Use #import then the file name (NOT WITH THE .scss EXTENSION).
#import "config";
#import "menu";
// Ensures inside padding will not affect height/width of box, it will just be in the box itself.
* {
box-sizing: border-box;
}
body {
#include background;
background: $primary-color;
color: set-text-color($primary-color);
height: 100%;
margin: 0;
font-family: "Segoe UI", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.5;
}
// Headings
h1,
h2,
h3 {
margin: 0;
font-weight: 400;
&.lg-heading {
font-size: 6rem;
}
&.sm-heading {
margin-bottom: 2rem;
padding: 0.2rem 1rem;
// Background to heading information will be lighter.
// Wrap in RGBA function, 0.5 is the opacity.
background: rgba(lighten($primary-color, 2), 0.5);
}
}
a {
color: #fff;
text-decoration: none;
}
// Header (icon) is fixed so it stays at top right when user scrolls through the webpage.
header {
position: fixed;
z-index: 2;
width: 100%;
}
.text-secondary {
color: $secondary-color;
}
// Nesting the .icons class so that only the icons in the main tag will be affected. This is specific to SASS.
main {
padding: 4rem;
// height: 100%;
min-height: calc(100vh - 60px);
.icons {
margin-top: 1rem;
color: set-text-color($primary-color);
// Inside the div class "icons", each icon is wrapped in a link.
a {
padding: 0.4rem;
// Putting the & in things is specific to SASS, this is not a feature of normal CSS.
&:hover {
color: $secondary-color;
#include easeOut();
}
}
}
&#home {
// This makes it so that there will never be scroll bars.
overflow: hidden;
h1 {
// This brings my name down closer to the middle of the page.
margin-top: 20vh;
}
}
}
.about-info {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr !important;
grid-template-rows: auto !important;
grid-template-areas:
"bioimage bio bio"
" job1 job2 job3" !important;
.bio-image {
grid-area: bioimage;
margin: auto;
border-radius: 50%;
border: $secondary-color 3px solid;
}
.bio {
grid-area: bio;
font-size: 1.5rem;
}
.job-1 {
grid-area: job1;
}
.job-2 {
grid-area: job2;
}
.job-3 {
grid-area: job3;
}
.job {
background: lighten($primary-color: 5);
padding: 0.5rem;
border-bottom: $secondary-color 5px solid;
}
}
#main-footer {
text-align: center;
padding: 1rem;
background: darken($primary-color: 10);
color: set-text-color($primary-color);
height: 60px;
}
#import "mobile";
I took this snippet from the code you linked and rewrote it without SCSS so it can compile below. It seems to me like display: grid is working just fine. If you open the chrome dev tools and inspect, you will see a "grid" label on the .about-info element.
.about-info {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "bioimage bio bio" " job1 job2 job3" !important;
}
.about-info .job-1 {
grid-area: job1;
}
.about-info .job-2 {
grid-area: job2;
}
.about-info .job-3 {
grid-area: job3;
}
.about-info .bio {
grid-area: bio;
font-size: 1.5rem;
}
.about-info .bio-image {
grid-area: bioimage;
margin: auto;
border-radius: 50%;
border: $secondary-color 3px solid;
}
.about-info .job {
background: lighten($primary-color: 5);
padding: 0.5rem;
border-bottom: $secondary-color 5px solid;
}
<div class="about-info">
<div class="bio">
<h3 class="text-secondary">BIO</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem dolore at, quasi natus veritatis, amet cum voluptates, iste fugit atque autem laboriosam. Provident officia modi inventore fugit recusandae vitae nisi.</p>
</div>
<div class="job job-1">
<h3>123 Webshop</h3>
<h6>Full Stack Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-2">
<h3>Designers ABC</h3>
<h6>Front End Developer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
<div class="job job-3">
<h3>Webworks</h3>
<h6>Graphic Designer</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nisi ipsum aperiam inventore. Inventore illo accusamus debitis facilis, quisquam velit aliquam?</p>
</div>
</div>
The section of code that I am using is shown below and it shows all the bubbles on the left side, i.e. either the one sent by the user "friend" or by the user "self".
As you can see, I've tried it with float, but when using relative/absolute positioning between parent and child divs, everything was being overlapped as I did not know what to do with the height.
Thanks in advance for your help!
P.S.: I am using Bootstrap.
<div class="row no-gutters">
<div class="chat-bubble-container ">
<div class="chat-bubble msg-self">
Lorem ipsum!
</div>
</div>
</div>
<div class="row no-gutters">
<div class="chat-bubble-container">
<div class="chat-bubble msg-friend">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci!
</div>
</div>
</div>
.chat-bubble-container {
width: auto;
}
.chat-bubble {
font-size: 1.4rem;
padding: 1rem 1.4rem;
margin: 1rem 3rem;
border-radius: .9rem;
}
.msg-friend {
color: white;
background-color: grey;
}
.msg-self {
color: white;
background-color: pink;
}
You can use margin-left: auto; and margin-right: auto; properties to achieve that layout.
.chat-bubble-container {
display: flex;
width: 100%;
}
.chat-bubble {
font-size: 1.4rem;
padding: 1rem 1.4rem;
margin-top: 1rem;
margin-bottom: 1rem;
border-radius: .9rem;
width: auto;
max-width: 300px;
}
.msg-friend {
color: white;
background-color: grey;
margin-left:3rem;
margin-right: auto;
}
.msg-self {
color: white;
background-color: pink;
margin-right:3rem;
margin-left: auto;
}
<div class="row no-gutters">
<div class="chat-bubble-container ">
<div class="chat-bubble msg-self">
Lorem ipsum!
</div>
</div>
</div>
<div class="row no-gutters">
<div class="chat-bubble-container">
<div class="chat-bubble msg-friend">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste nisi, odit ut nemo placeat labore, eligendi adipisci!
</div>
</div>
</div>