Hey guys just a little help and advise needed here,
I have created a section for my website using flex but it seems when shrinking the page its not collapsing under the first div. it should look like 1 on the left then 2 sets of 3 on the right. Here is my current code can anyone see any errors:
@joey13, what determines the breakpoint or width at which the changes take place? In other words, how does flex know when and how it is supposed to change the layout?
For your review, please read at least the portion where we ask you to post a working page that demonstrates the issue. It helps if the code presents what you see.
That example doesn’t “flex” for me the way you expected it to. Flex doesn’t wrap to another line unless you tell it to.
The following “working page” contains your code plus Paul’s add minus a few lines that I commented out. All changes are noted with comment marks.
Copy the following “working page” to a file, give it an .html suffix and open it in your browser.
Please see if this behaves the way you wish it to.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="css/stylesheet.css">
<title>flex = PaulOB</title>
<!--
Flexbox not collapsing the way it should
https://www.sitepoint.com/community/t/flexbox-not-collapsing-the-way-it-should/304380
joey13
-->
<style>
.Container-Services {
/* width: 100%; /* Unnecessary, full width is the default. */
display: flex;
/* flex-direction: row; /* Unnecessary. */
/* margin-right: auto; /* Unnecessary. */
/* margin-left: auto; /* Unnecessary. */
margin-top: 15%; /* Are you Sure that you want to use percent? */
}
.Services-Left {
width: 55%;
flex: 1;
background-color: #bdf; /* changed from black because text is black. */
background-image: url(inc/Images/Homepage/OurServicesImage.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
outline:1px solid blue; /* TEST Outline. To Be DELETED */
}
.Services-Right {
width: 45%;
display: flex;
align-items: center;
justify-content: center;
flex-flow: row wrap;
outline:1px solid red; /* TEST Outline. To Be DELETED */
}
.Services-col {
display: flex;
width: 33.33%;
outline:1px dashed red; /* TEST Outline. To Be DELETED */
}
/* This rule doesn't do anything. Padding-top is based on the width of the parent container. */
/* Change .Services-col from display:flex to display:block to apply this 100% padding-top. */
/*
.Services-col:before {
content: "";
display: block;
padding-top: 100%; /* initial ratio of 1:1 * /
}
*/
/* Paul's add */
@media screen and (max-width: 800px) {
.Container-Services {
flex-wrap: wrap;
}
.Services-Left,
.Services-Right {
flex: 1 0 100%;
}
}
</style>
</head>
<body>
<div class="Container-Services">
<div class="Services-Left">
<hr class="White-HR-Long">
<h1 class="WhiteText H-Width210">Customer Services</h1>
<h2 class="H-Uppercase WhiteText">Learn More</h2>
<hr class="White-HR-Small"> <!-- this line moved outside of preceeding h2 -->
</div>
<div class="Services-Right">
<div class="Services-col RedBox">
<p>Service</p>
</div>
<div class="Services-col BlueBox">
<p>Service</p>
</div>
<div class="Services-col PurpleBox">
<p>Service</p>
</div>
<div class="Services-col YellowBox">
<p>Service</p>
</div>
<div class="Services-col BlackBox">
<p>Service</p>
</div>
<div class="Services-col TealBox">
<p>Service</p>
</div>
</div>
</div>
</body>
</html>
Free advice: Be wary of code that you copy from sites. You really need to know what you are doing to avoid making or importing others’ mistakes.
For example, the site that you linked to above shows quite a few significant errors: https://validator.w3.org/nu/?doc=http%3A%2F%2Fs749376357.websitehome.co.uk%2F
One should validate his code frequently during development to avoid an accumulation of errors.
