This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed last year.
I am trying to have a flexbox container with 3 internal boxes, but two of them are being pushed off the parent container. There is space above the .halfcontainers div when I add text, I tried to solve this by setting the margin to 0, but it hasn't done anything.
Image of the problem - [1]: https://i.stack.imgur.com/9H4E2.png
body {
margin: 0;
height: 100%;
}
.container {
margin: 50px auto 100px auto;
padding: 0;
width: 800px;
height: 500px;
background-color: rgb(240, 240, 240);
border-radius: 10px;
box-shadow: 6px 7px 8px rgba(0, 0, 0, 0.158) ;
display: flex;
}
.leftcontainer {
margin: 0;
flex: 1 1 0;
}
.rightcontainer {
margin: 0;
flex: 1 1 0;
display: flex;
flex-direction: column;
/* min-height: 100%;
min-width: 50%; */
}
.halfcontainers {
margin: 0;
flex: 1;
}
.top {
margin: 0;
background-color: rgb(233, 233, 233);
height: 100%;
border-radius: 0 10px 0 0;
}
.bottom {
margin: 0;
background-color: rgb(209, 209, 209);
height: 100%;
border-radius: 0 0 10px 0;
}
h1 {
margin: 10px 10px 0px 10px;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
}
p {
margin: 10px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 12px;
}
<body>
<div class="container">
<div class="leftcontainer">left</div>
<div class="rightcontainer">
<div class="halfcontainers">
<div class="top">
<h1>Financial Stability</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem at officia minus deleniti quae modi iste.</p>
</div>
</div>
<div class="halfcontainers">
<div class="bottom">
<h1>24/7 Support</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit cumque enim nulla nesciunt iure quo nisi vitae. Libero, enim natus!</p>
</div>
</div>
</div>
</div>
There are a few ways to do this:
(a) Add overflow: auto; to bottom and top.
(b) Add display: inline-block; to bottom and top.
As Temani mentioned in the comments, overflow: auto; is a sure fix for the issue. Compared to inline-block which only fixes it if there is a block level element nested in the parent.
body {
margin: 0;
height: 100%;
}
.container {
margin: 50px auto 100px auto;
padding: 0;
width: 800px;
height: 500px;
background-color: rgb(240, 240, 240);
border-radius: 10px;
box-shadow: 6px 7px 8px rgba(0, 0, 0, 0.158);
display: flex;
}
.leftcontainer {
margin: 0;
flex: 1 1 0;
}
.rightcontainer {
margin: 0;
flex: 1 1 0;
display: flex;
flex-direction: column;
/* min-height: 100%;
min-width: 50%; */
}
.halfcontainers {
margin: 0;
flex: 1;
}
.top {
margin: 0;
background-color: rgb(233, 233, 233);
height: 100%;
border-radius: 0 10px 0 0;
}
.bottom {
margin: 0;
background-color: rgb(209, 209, 209);
height: 100%;
border-radius: 0 0 10px 0;
}
.bottom,
.top {
display: inline-block;
}
h1 {
margin: 10px 10px 0px 10px;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
}
p {
margin: 10px;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 12px;
}
<body>
<div class="container">
<div class="leftcontainer">left</div>
<div class="rightcontainer">
<div class="halfcontainers">
<div class="top">
<h1>Financial Stability</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quidem at officia minus deleniti quae modi iste.</p>
</div>
</div>
<div class="halfcontainers">
<div class="bottom">
<h1>24/7 Support</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugit cumque enim nulla nesciunt iure quo nisi vitae. Libero, enim natus!</p>
</div>
</div>
</div>
</div>
Related
I building my own web page, and I was planning to place a timeline, I've investigated and found one that I want to take as a model, however, I only want to put two cards, but when I comment the rest of the cards, it gets misconfigured and loses its shape, placing itself the second card below the first when I want it to be next to it, how can I put it right next to it without affecting the rest of the structure?
/* Media Queries */
#mixin mq-xs {
#media (min-width: 320px) {
#content;
}
}
#mixin mq-sm {
#media (min-width: 480px) {
#content;
}
}
#mixin mq-md {
#media (min-width: 720px) {
#content;
}
}
#mixin mq-lg {
#media (min-width: 1000px) {
#content;
}
}
$background: #f7f7f7;
$box-shadow: 0px 1px 22px 4px rgba(0, 0, 0, 0.07);
$border: 1px solid rgba(191, 191, 191, 0.4);
$items: 5;
$rows: ceil($items/2);
/* Card sizing */
$card-height: 400px;
$card-width: 450px;
$inner-margin: 15px;
$number-size: 35px;
$stagger: 180px;
$outer-margin: 90px;
$marker-size: 9px;
/* Colors */
$steps: #46b8e9;
$colors: #46b8e9,
#3ee9d1,
#ce43eb,
#4d92eb;
$timeline: #bdbdbd;
/* Calculations */
$container-height: $rows * ($card-height + $outer-margin) + $stagger;
$container-width: $card-width*2 + $outer-margin*3;
$head-height: $number-size + 50;
$body-height: $card-height - $head-height;
$marker-dist: $card-width + $outer-margin/2 - $marker-size/2;
/* Placeholders */
#include mq-lg {
%arrow {
position: absolute;
content: "";
width: 0;
height: 0;
}
%marker {
position: absolute;
content: "";
width: $marker-size;
height: $marker-size;
background-color: $timeline;
border-radius: $marker-size;
box-shadow: 0px 0px 2px 8px $background;
}
}
/* Some Cool Stuff */
$counter: $items - $rows + 2;
#for $i from 1 through $rows {
.demo-card:nth-child(#{$i*2-1}) { order: $i }
.demo-card:nth-child(#{$i*2}) { order: $counter }
$counter: $counter + 1;
}
/* Border Box */
* {
box-sizing: border-box;
}
/* Fonts */
#timeline {
padding: 100px 0;
background: $background;
border-top: $border;
border-bottom: $border;
.logo
{
width: 60px;
border-radius: 10px;
}
h1 {
text-align: center;
font-size: 3rem;
font-weight: 200;
margin-bottom: 20px;
}
p.leader {
text-align: center;
max-width: 90%;
margin: auto;
margin-bottom: 45px;
}
.demo-card-wrapper {
position: relative;
margin: auto;
#include mq-lg {
display: flex;
flex-flow: column wrap;
width: $container-width;
height: $container-height;
margin: 0 auto;
}
&::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
border-left: $border;
#include mq-lg {
border-left: 1px solid $timeline;
}
}
}
.demo-card {
position: relative;
display: block;
margin: 10px auto 80px;
max-width: 94%;
#include mq-sm {
max-width: 60%;
box-shadow: $box-shadow;
}
#include mq-md {
max-width: 40%;
}
#include mq-lg {
max-width: $card-width;
height: $card-height;
margin: $outer-margin;
margin-top: $outer-margin/2;
margin-bottom: $outer-margin/2;
&:nth-child(odd) {
margin-right: $outer-margin/2;
.head::after {
#extend %arrow;
border-left-width: 15px;
border-left-style: solid;
left: 100%;
}
.head::before {
#extend %marker;
left: $marker-dist + 1;
}
}
&:nth-child(even) {
margin-left: $outer-margin/2;
.head::after {
#extend %arrow;
border-right-width: 15px;
border-right-style: solid;
right: 100%;
}
.head::before {
#extend %marker;
right: $marker-dist - 1;
}
}
&:nth-child(2) {
margin-top: $stagger;
}
}
.head {
background-color: black;
position: relative;
display: flex;
align-items: center;
color: #fff;
font-weight: 400;
.number-box {
display: inline;
float: left;
margin: $inner-margin;
padding: 10px;
font-size: $number-size;
line-height: $number-size;
font-weight: 600;
background: rgba(0, 0, 0, 0.17);
}
h2 {
text-transform: uppercase;
font-size: 1.3rem;
font-weight: inherit;
letter-spacing: 2px;
margin: 0;
padding-bottom: 6px;
line-height: 1rem;
#include mq-sm {
font-size: 165%;
line-height: 1.2rem;
}
span {
display: block;
font-size: 0.6rem;
margin: 0;
#include mq-sm {
font-size: 0.8rem;
}
}
}
}
.body {
background: #fff;
border: $border;
border-top: 0;
padding: $inner-margin;
#include mq-lg {
height: $body-height;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: $inner-margin;
}
img {
display: block;
width: 100%;
}
}
#for $i from 1 through $items {
&--step#{$i} {
$color: nth($colors, ((($i - 1) % 4) + 1));
background-color: $color;
.head::after {
border-color: $color;
}
}
}
}
}
<section id=timeline>
<h1>A Flexbox Timeline</h1>
<p class="leader">All cards must be the same height and width for space calculations on large screens.</p>
<div class="demo-card-wrapper">
<div class="demo-card demo-card--step1">
<div class="head">
<div class="number-box">
<span><img src="../../assets/img/-.png" class="logo"></span>
</div>
<h2><span class="small">- (2022)</span> -</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step2">
<div class="head">
<div class="number-box">
<span><img src="../../assets/img/-.png" class="logo"></span>
</div>
<h2><span class="small">-</span> -</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step3">
<div class="head">
<div class="number-box">
<span>03</span>
</div>
<h2><span class="small">Subtitle</span> Adaptation</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step4">
<div class="head">
<div class="number-box">
<span>04</span>
</div>
<h2><span class="small">Subtitle</span> Consistency</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
<div class="demo-card demo-card--step5">
<div class="head">
<div class="number-box">
<span>05</span>
</div>
<h2><span class="small">Subtitle</span> Conversion</h2>
</div>
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta reiciendis deserunt doloribus consequatur, laudantium odio dolorum laboriosam.</p>
<img src="http://placehold.it/1000x500" alt="Graphic">
</div>
</div>
</div>
</section>
I'm trying to make a component that uses both a background color for half of the component and
an image for the other half, with the image acting as an element with a margin. The problem I'm having is that I cannot use display flex to space elements correctly in the content area, it breaks the component with the current solution I'm using and I have no idea why.
I'm specifically trying to position .service__link at the bottom of .service__content. I've tried using paddings/margins to get it in place, but at smaller screen sizes it ends up overflowing out of the box.
*, *::before, *::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
font-family: Arial;
}
.service-container {
max-width: 1800px;
margin-inline: auto;
padding: 40px 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.service {
flex: 1 1 calc(33.3336% - 1.5rem);
display: inline-block;
position: relative;
background: #144088;
min-height: 325px;
border: 2px solid #144088;
color: white;
}
.service::before {
content: "";
float: right;
width: 100%;
height: 100%;
background: url(https://images.unsplash.com/photo-1645069258059-6f5a71256c4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80) left center/150%;
shape-outside: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
clip-path: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
shape-margin: .3em;
}
.service::after {
content: "01";
position: absolute;
top: 0;
font-size: 60px;
font-weight: bold;
line-height: 1;
opacity: 25%;
}
.service__content {
padding: 3rem 0 1rem 1rem;
height: 100%;
}
.service__title {
font-size: 26px;
}
.service__description {
font-size: clamp(12px, 3vw + .25rem, 16px);
}
.service__title, .service__description {
margin-bottom: 1rem;
}
.service__link {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 35%;
}
.service__link a {
color: white;
}
.service__link img {
filter: brightness(0)invert(1);
}
#media screen and (max-width: 1200px) {
.service {
flex: 0 1 518px;
}
}
<body>
<div class="service-container">
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link ">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
</div>
</body>
What is going on when display: flex is added to .service__content?
Also, if anybody has a better idea of how to make this component in general I'd love to hear it.
Thanks!
I think you could use this:
position: absolute; bottom: 30px
to put it in the bottom part of the div.
If you set service__link to flex instead of inline flex and add margin-top auto it should stay on the bottom
you have to give position : relative for container
than for service__link position: absolute; left:10px; bottom:10px;
there will be no deterioration in smaller screen.
.service__content {
padding: 3rem 0 1rem 1rem;
height: 100%;
position: relative; // Added
}
.service__link {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 35%;
position: absolute; // Added
left:10px; // Added
bottom:10px; // Added
}
*, *::before, *::after {
box-sizing: border-box;
}
* {
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
font-family: Arial;
}
.service-container {
max-width: 1800px;
margin-inline: auto;
padding: 40px 15px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}
.service {
flex: 1 1 calc(33.3336% - 1.5rem);
display: inline-block;
position: relative;
background: #144088;
min-height: 325px;
border: 2px solid #144088;
color: white;
}
.service::before {
content: "";
float: right;
width: 100%;
height: 100%;
background: url(https://images.unsplash.com/photo-1645069258059-6f5a71256c4a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80) left center/150%;
shape-outside: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
clip-path: polygon(79% 0, 100% 0, 100% 100%, 42% 100%);
shape-margin: .3em;
}
.service::after {
content: "01";
position: absolute;
top: 0;
font-size: 60px;
font-weight: bold;
line-height: 1;
opacity: 25%;
}
.service__content {
padding: 3rem 0 1rem 1rem;
height: 100%;
position:relative;
}
.service__title {
font-size: 26px;
}
.service__description {
font-size: clamp(12px, 3vw + .25rem, 16px);
}
.service__title, .service__description {
margin-bottom: 1rem;
}
.service__link {
display: inline-flex;
justify-content: space-between;
align-items: center;
width: 35%;
position:absolute;
left:10px;
bottom:10px;
}
.service__link a {
color: white;
}
.service__link img {
filter: brightness(0)invert(1);
}
#media screen and (max-width: 1200px) {
.service {
flex: 0 1 518px;
}
}
<body>
<div class="service-container">
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
<div class="service">
<div class="service__content">
<h4 class="service__title">Lorem</h4>
<p class="service__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Placeat doloremque molestiae eligendi voluptas veniam repellendus, aperiam tempora suscipit consectetur sint?</p>
<div class="service__link ">
Link
<img src="https://img.icons8.com/ios/26/000000/image.png"/>
</div>
</div>
</div>
</div>
</body>
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 2 years ago.
I don't know what i'm missing here but i can't seem to center my div under a section. Whenever i try to put a margin on the div alone, it also applies a margin to the section tag.
What i want to do is very simple. Put <div class="container"> on the center of the <section id="main">, so the <div class="container"> has space at every side.
Here is my HTML code:
<body>
<section id="main">
<div class="container">
<nav><h2>ALEX\ALBARAN</h2><img src="icon_back.png"></nav><br><br><br>
<div class="box-1">
<h1> HELLO! I'M ALEX</h1>
</div> <br><br>
<div class="box-2">
<h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique inventore ipsa optio velit, neque, itaque quasi fugiat impedit libero, vitae temporibus? Quisquam libero voluptas, excepturi non fugiat, perferendis laborum magni!</h3><br><br>
</div>
<div class=box-3>
<i class="fas fa-arrow-circle-down"></i>
</div>
</div>
</section>
and here is my CSS code:
nav {
display: flex;
justify-content: space-between;
}
h2 {
font-family: 'Questrial', sans-serif;
font-weight: 200;
font-size: 15px;
color: white;
}
img {
width:40px;
height: 40px;
align-items: flex-end;
}
#main {
background-color: aqua;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
background-image:url(bg1.png);
background-repeat: no-repeat;
background-size: cover;
width: 80%;
justify-content: center;
text-align: center;
margin: 10% 10%;
}
.box-1 {
border: 3px solid white;
background-color: transparent;
color: white;
width: 50%;
padding: auto;
margin: auto;
text-align: center;
}
.box-2 {
font-size: 10px;
font-weight: 100;
color: white;
background-color: transparent;
width: 50%;
padding:auto;
margin:auto;
text-align: center;
}
.box-3 {
text-align: center;
color: white;
padding-bottom: 20px;
}
You can use display:flex on main div. Then center .container.
Here is a simplified snippet:
#main {
background-color: aqua;
font-family: 'Roboto', sans-serif;
font-weight: 100;
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
.container {
border: 1px solid red;
width: 80%;
height: 80px
}
<section id="main">
<div class="container">
</div>
</section>
To center your div, here are the attributes you have to add in the CSS:
.centered-div {
margin: 0 auto;
width: 80%; // specifies a custom width
}
The problem was the margin: 10% 10%. Replace it with the auto margin and the result will be this (run the snippet to see your HTML page displayed):
nav {
display: flex;
justify-content: space-between;
}
h2 {
font-family: 'Questrial', sans-serif;
font-weight: 200;
font-size: 15px;
color: white;
}
img {
width:40px;
height: 40px;
align-items: flex-end;
}
#main {
background-color: aqua;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
.container {
background-image:url(bg1.png);
background-repeat: no-repeat;
background-size: cover;
width: 80%;
justify-content: center;
text-align: center;
margin: 0 auto; ############# HERE IS THE MODIFIED LINE #############
}
.box-1 {
border: 3px solid white;
background-color: transparent;
color: white;
width: 50%;
padding: auto;
margin: auto;
text-align: center;
}
.box-2 {
font-size: 10px;
font-weight: 100;
color: white;
background-color: transparent;
width: 50%;
padding:auto;
margin:auto;
text-align: center;
}
.box-3 {
text-align: center;
color: white;
padding-bottom: 20px;
}
<body>
<section id="main">
<div class="container">
<nav><h2>ALEX\ALBARAN</h2><img src="icon_back.png"></nav><br><br><br>
<div class="box-1">
<h1> HELLO! I'M ALEX</h1>
</div> <br><br>
<div class="box-2">
<h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique inventore ipsa optio velit, neque, itaque quasi fugiat impedit libero, vitae temporibus? Quisquam libero voluptas, excepturi non fugiat, perferendis laborum magni!</h3><br><br>
</div>
<div class=box-3>
<i class="fas fa-arrow-circle-down"></i>
</div>
</div>
</section>
By the way, you forgot to close your <body>.
Forgive my if my html and css is bad this is my first page im doing alone. I have been working on this issue for atleast 3 hours I have my index page complete looks halfway decent but when I commit it to github and view it on my sons iphone the images look squished and the aspect ratio is off. If I can have any help thanks in advance!!
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" href="css/stylesheet.css" />
<title>RealtorsRUs</title>
</head>
<body>
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
MReality
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a></li>
<li>
About Us</li>
<li>
Contact Us</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero
excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil
deserunt explicabo!
</p>
Read More
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img
src="images/evelyn-paris-XJnP4L958ds-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item2">
<img
src="images/jesse-roberts-561igiTyvSk-unsplash.jpg"
alt="Home"
/>
</div>
<div class="item3">
<img
src="images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg"
alt="Home"
/>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>
</body>
</html>
enter code here
css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: .95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div{
margin: 5px;
display: flex;
}
.flex-row h3{
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
img {
max-width: 100%;
}
.logo{
font-size: 1.5rem;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("../images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center
center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("../images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("../images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg")
no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter p{
text-align: center;
background: #333;
color: #fff;
padding: 20px;
}
#media(max-width: 768px) {
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.navbar a {
padding: 10px 10px;
margin: 0 3px;
}
.flex-row{
flex-wrap: wrap;
}
.featuredlistings h2{
text-align: center;
font-size: 2rem;
}
.article-1 p, .article-2 p{
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img{
flex: 1;
}
.flex-row .item1 .item2 .item3{
Your problem may be fairly easy to solve. May be, as I am not on Safari, but IE11 seems to have the same problem.
Solution
img: { max-width: 100% } should be img: { width: 100% }. Because element width and height are CSS default auto, which means that the browser will try to fill all the space available with the image, fully disregarding its ratio (it stretches in every direction). width: 100% (OR height: 100%, not both!) will make sure that images fill the full width (OR height) of the available space and size its height (OR width) to ratio.
#media screen and (max-width: 768px) { .... img { flex: 1 } .... } should become #media screen and (max-width: 768px) { .... img { flex-grow: 1 } .... }. Especially IE11 cannot handle the shorthand property flex very well, so you need the individual properties instead CSS flex Property. I am not sure, but Safari may have the same problem (may need the vendor prefix -webkit-).
Before, IE11 did not show the images at all with a browser window smaller than 768px and did not preserve the image ratios when resizing, but with my changes everything works as expected. Hopefully, Safari too!
BTW Chrome, Edge and Firefox did not show the problem on W10.
The snippet (code copied from your Github site) with the two changes.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.btn {
cursor: pointer;
display: inline-block;
padding: 10px 60px;
color: #fff;
border: none;
border-radius: 5px;
background-color: #333;
font-size: 20px;
opacity: 0.95;
}
.flex-row {
display: flex;
text-align: center;
justify-content: center;
}
.flex-row div {
margin: 5px;
display: flex;
}
.flex-row h3 {
font-size: 3rem;
}
.flex-row-article {
display: flex;
text-align: center;
justify-content: center;
flex-direction: column;
}
body {
background: #f9f9f9;
color: #333;
line-height: 1.6;
}
ul {
list-style: none;
}
.navbar {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #333;
color: #fff;
height: 50px;
width: 100%;
padding: 5px;
position: fixed;
top: 0px;
opacity: 0.9;
z-index: 2;
}
.navbar a {
color: #fff;
padding: 10px 10px;
margin: 0 5px;
}
.navbar a:hover {
border-bottom: #fff 2px solid;
}
.navbar ul {
display: flex;
position: sticky;
top: 0;
}
.navbar h1 {}
img {
/* max-width: 100%;/* REMOVED */
width: 100%;
}
.logo {
font-size: 1.5rem;
position: relative;
}
a {
text-decoration: none;
color: #333;
}
.hero-aboutus {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/roger-starnes-sr-BNY7m7BhS2o-unsplash.jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
}
.hero-contactus {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/bailey-anselme-Bkp3gLygyeA-unsplash\ \(2\).jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
background-position-y: 40%;
}
.hero {
background: url("https://amolina0116.github.io/MyProjects/realtorsite/images/francesca-tosolini-XAHSexPxSus-unsplash\ \(1\).jpg") no-repeat center center/cover;
height: 100vh;
text-align: center;
position: relative;
width: 100%;
overflow: hidden;
}
.hero .content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
height: 100%;
color: #fff;
}
.hero .content h1 {
font-size: 3rem;
z-index: 1;
}
.hero .content p {
font-size: 1.5rem;
width: 100%;
margin: 10px 30px;
padding: 0 20px;
z-index: 1;
}
.hero:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
.featuredlistings h2 {
text-align: center;
font-size: 2rem;
margin: 5px;
padding: 10px;
}
.article-1 p,
.article-2 p {
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 50%;
}
#mainfooter {
height: 50px;
background: #333;
text-align: center;
color: #fff;
width: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
#mainfooter p {}
.ourteam {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
color: #fff;
}
.fred {
background: #333;
opacity: 0.9;
margin: 5px;
padding: 10px;
/* height: ; /**/
}
.fred img {
height: 200px;
border-radius: 50%;
}
.sammy {
background: #333;
opacity: 0.9;
margin: 5px;
padding: 10px;
}
.sammy img {
border-radius: 50%;
}
.box {
display: flex;
align-items: center;
text-align: center;
justify-content: center;
align-content: center;
height: 100%;
background: #333;
color: #fff;
padding: 10px;
}
.box1 {
border-right: black solid 1px;
width: 33.3%;
}
.box2 {
width: 33.3%;
}
.box3 {
border-left: black solid 1px;
width: 33.3%;
}
input[type="text"],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type="submit"] {
background-color: #4caf50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
position: relative;
top: 30%;
opacity: 0.85;
margin: 0 30%;
}
.contactform {
height: 60vh;
}
#subject {
height: 100px;
}
#media screen and (max-width: 768px) {
#icons {
display: none;
}
.contactform {
width: 100%;
line-height: 0.5;
}
.container {
margin: 0 auto;
top: 80px;
}
.fred {
position: relative;
top: 40px;
}
.navbar {
flex-direction: column;
height: 80px;
padding: 20px;
z-index: 100;
align-items: center;
justify-content: center;
}
.flex-row {
flex-wrap: wrap;
}
.featuredlistings h2 {
text-align: center;
font-size: 2rem;
}
.article-1 p,
.article-2 p {
margin: 0 auto;
padding: 10px;
text-align: center;
font-size: 1.5rem;
width: 100%;
}
img {
flex-grow: 1;
/* MODDED, was flex: 1 */
}
.fred img {
height: 80px;
}
}
.sammy img {}
<!-- Begin Navbar -->
<header class="hero">
<div id="navbar" class="navbar">
<h1 class="logo">
MReality
</h1>
<nav>
<ul>
<li>
<a class="current" href="index.html">Home</a>
</li>
<li>
About
</li>
<li>
Contact
</li>
</ul>
</nav>
</div>
<!-- End Navbar -->
<div class="content">
<h1>Welcome Home</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque vero excepturi dolore sequi quibusdam nostrum aperiam voluptatum nihil deserunt explicabo!
</p>
Read More
</div>
</header>
<main>
<!-- Begin Featured Listings -->
<section class="featuredlistings">
<h2>Featured Listings</h2>
<div class="flex-row">
<div class="item1">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/evelyn-paris-XJnP4L958ds-unsplash.jpg" alt="Home" />
</div>
<div class="item2">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/jesse-roberts-561igiTyvSk-unsplash.jpg" alt="Home" />
</div>
<div class="item3">
<img src="https://amolina0116.github.io/MyProjects/realtorsite/images/daniel-barnes-RKdLlTyjm5g-unsplash.jpg" alt="Home" />
</div>
</div>
</section>
<article id="section-1" class="flex-row-article">
<div class="article-1">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore mollitia, ipsa neque aliquid quod similique consequatur accusantium harum facere natus. Omnis blanditiis incidunt nobis similique reprehenderit illo quaerat, sed ad reiciendis fugit sequi
molestias, inventore, exercitationem consectetur soluta. Quibusdam quod laborum eaque, perferendis fugit similique dolorem ipsum mollitia sunt incidunt?
</p>
</div>
<div class="article-2">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam ut dignissimos vitae voluptatum, obcaecati quidem, eaque, amet cum illo eos numquam iste officiis quia aspernatur animi dicta consectetur nulla eligendi! Laboriosam quas sunt dolor dignissimos
illo at porro asperiores, earum, cum sapiente voluptates nemo animi dolore repellat libero cupiditate nulla?
</p>
</div>
</article>
</main>
<footer id="mainfooter">
<p>MReality © 2020, All Rights Reserved</p>
</footer>
I have this simple html and css (sass) with some nesting, but not much. The problem I have is that in the first big div all sub-elements are displayed inside as they are written, but in the other div (same class) bg-color and margin cover only the heading and not the other elements in that div.
What is happening?
codepen link
* {
box-sizing: border-box;
}
.intro {
position: relative;
display: block;
background: #F3F5F8;
padding: 50px 0;
text-align: center;
color: slategray;
}
.intro:nth-child(2) {
background: #e8e6e3;
}
.intro section {
margin-left: auto;
margin-right: auto;
padding-left: 50px;
padding-right: 50px;
width: 600px;
}
.intro section .column {
position: relative;
float: left;
width: 33.33333%;
padding: 0 20px;
}
.intro section .column .item {
position: relative;
margin: 30px auto;
width: 15px;
height: 15px;
max-width: 100%;
display: block;
background: cadetblue;
border-radius: 50%;
}
.intro section .column h3 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section .column p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0;
margin: 25px 0;
}
.intro section h2 {
font: 2em "Montserrat", sans-serif;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.intro section h4 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0 120px;
margin: 45px 0 0;
}
<div class="intro">
<section>
<h4>WHO WE ARE</h4>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum voluptas, ullam vero est.</p>
</section>
</div>
<div class="intro">
<section>
<h4>WHAT WE DO</h4>
<h2>HEADING</h2>
<div class="column">
<div class="item"></div>
<h3>ITEM1</h3>
<p>Necessitatibus ipsa ex hic sunt maxime.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM2</h3>
<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</section>
</div>
Thanks
because your .column divs are float:left; you need a container with clear:both; after the columns:
<section>
<h4>WHAT WE DO</h4>
<h2>HEADING</h2>
<div class="column">
<div class="item"></div>
<h3>ITEM1</h3>
<p>Necessitatibus ipsa ex hic sunt maxime.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM2</h3>
<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<div class="clearer"></div>
</section>
CSS
.clearer {
clear:both;
}
http://codepen.io/anon/pen/myvwNY
Without the clear the container the floating divs are in has no height.
Think I understand - you have column collapse from the floated column
http://codepen.io/anon/pen/vEbZoP
just add a clear after them like so
<div class="clear"></div>
.clear
clear: both;
This is due to floats of .colomn , you can use conatain float or clearfix techniques
I have listed tow of them below
1) added <p></p> with clear both sides after floated element
2) add overflow:hidden to the parent of floated element (ie )
Read more about clearfix and containing floats
* {
box-sizing: border-box;
}
.intro {
position: relative;
display: block;
background: #F3F5F8;
padding: 50px 0;
text-align: center;
color: slategray;
}
.intro:nth-child(2) {
background: #e8e6e3;
}
.intro section {
margin-left: auto;
margin-right: auto;
padding-left: 50px;
padding-right: 50px;
width: 600px;
}
.intro section .column {
position: relative;
float: left;
width: 33.33333%;
padding: 0 20px;
}
.intro section .column .item {
position: relative;
margin: 30px auto;
width: 15px;
height: 15px;
max-width: 100%;
display: block;
background: cadetblue;
border-radius: 50%;
}
.intro section .column h3 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section .column p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0;
margin: 25px 0;
}
.intro section h2 {
font: 2em "Montserrat", sans-serif;
text-transform: uppercase;
padding: 0;
margin: 0;
}
.intro section h4 {
font: 0.6em "Montserrat", sans-serif;
padding: 0;
margin: 0;
letter-spacing: 0.5em;
}
.intro section p {
font: 0.8em/1.8em "Arimo", sans-serif;
padding: 0 120px;
margin: 45px 0 0;
}
<div class="intro">
<section>
<h4>WHO WE ARE</h4>
<h2>HEADING</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet dolorum voluptas, ullam vero est.</p>
</section>
</div>
<div class="intro">
<section>
<h4>WHAT WE DO</h4>
<h2>HEADING</h2>
<div class="column">
<div class="item"></div>
<h3>ITEM1</h3>
<p>Necessitatibus ipsa ex hic sunt maxime.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM2</h3>
<p>Molestias ipsum ex deleniti illo qui obcaecati repellat.</p>
</div>
<div class="column">
<div class="item"></div>
<h3>ITEM3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
<p style="clear:both"></p>
</section>
</div>