Flexbox not collapsing the way it should

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:

<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<hr class="White-HR-Small"></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>

and the CSS:

.Container-Services {
  width: 100%;
  display: flex;
  flex-direction: row;
  margin-right: auto;
  margin-left: auto;
  margin-top: 15%;
}

.Services-Left {
  width: 55%;
  flex: 1;
  background-color: black;
  background-image: url(inc/Images/Homepage/OurServicesImage.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.Services-Right {
  width: 45%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: wrap;
  flex-flow: row wrap;
}

.Services-col {
  display: flex;
  width: 33.33333333333333%;
}

.Services-col:before {
  content: "";
  display: block;
  padding-top: 100%; /* initial ratio of 1:1*/
}

Thanks

@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?

FYI if needed: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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.

1 Like

That’s what it looks like now?

Did you want the one on the left to be full width at smaller screens and then two lots of three underneath?

If so then try something like this|:

@media screen and (max-width: 800px) {
  .Container-Services {
    flex-wrap: wrap;
  }
  .Services-Left,
  .Services-Right {
    flex: 1 0 100%;
  }
}

Hey i’m not too sure, i’m new to flexbox that’s all here is the example you wanted: example here

Did you try the code I offered?

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. :slight_smile:

<!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.

For your developer’s reference collection:
https://validator.w3.org/nu/
https://jigsaw.w3.org/css-validator/

3 Likes

Look ma no media queries!!! :wink:

<!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 box solution #2</title>

    <style>
	    body, html {padding: 0; margin:0; }
.Container-Services {
    display: flex;
    flex-wrap: wrap;
    margin-top: 15%;  /* be aware that this is calculated based on CONATINER's WIDTH, not the viewport's height */
}
.Services-Left {
    flex: 11;
    flex-basis:440px;
    background-color: #bdf;  
    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 {
    flex: 9;
    flex-basis:360px;
    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;
    flex-basis: 33.33%;
    outline:1px dashed red;  /* TEST Outline. To Be DELETED */
}

     </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 odd ball conten and stuff to make this box bigger or longer. blah blah blah!!!</p>
        </div>
        <div class="Services-col BlackBox">
            <p>Service</p>
        </div>
        <div class="Services-col TealBox">
            <p>Service</p>
        </div>     
    </div>
</div>

</body>
</html>

The key beign flex-basis and a little math:)

hope that helps

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.