Adjusting flexbox section for smaller screens

HTML & CSS
1

Hi everyone,

I’ve put together the following flexbox card layout with the image to go on the left (in the grey section) and the content on the right.

https://codepen.io/gwnh/pen/f6ec10a53e5d2e999952620fca59e892

The card spans 100% width of the parent element on larger screens but I’m trying to work out how to get the div that contains the image (ie. .card-img) to appear above the content on smaller screens. I know that I’d use media queries but I don’t know how to adjust the code to turn off flexbox to make this happen.

I wondered if I could get some advice?

Thanks in advance.

2

You need to enable wrapping for this to happen.
On the .card-list-page, flex parent element, add flex-wrap: wrap;
Then to hint at what point you want the .card-img to wrap, give it a flex-basis in the flex shorthand property.

flex: 1 1 200px;

Use whatever vaule suits.

1 Like
3

Also note that once the divs have wrapped then the card-img div will have no height as such because it has no actual content (apart from a little height due to the parent containers min-height). You may want to ensure there is some min-height for your image to show :slight_smile:

4

Thanks for the replies,

I’m came up with the following code which works reasonably well:

https://codepen.io/gwnh/pen/f6ec10a53e5d2e999952620fca59e892

The only problem is that I still need it to be wrapping and 767px so the first media query really needs to be something like:

@media screen and (min-width: 325px) and (max-width: 767px)

But when I use the above rule the image disappears.

Would it be possible for someone to test this for me?

Also, I removed the min-height from the parent and placed it on the image div so hope that’s right.

5

Two things here.

  1. Why have you excluded the iphone SE, Iphone4 & 5 from the media queries?

They are 320px width and you have excluded them in one fell swoop when you used the value of 325px.

I would just use a max-width at 767px to change the image and rarely see a need to do a min and max in the same rule.

  1. It looks as though you don;t have the viewport meta tag in the codepen so all the mobile sizes will be wrong or get missed.

I would do it something like this.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.card-list-page main {
	background: white;
	padding: 20px;
	flex: 3 1 0%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.card-list-page section {
	padding: 10px 20px;
	flex: 0 1 auto;
}
.card-list-page {
	display: flex;
	flex-wrap: wrap;
    border: 1px solid lightgrey;
}
.card-img {
	flex: 1 1 0%;
	background: red url("image.jpg") top center/cover no-repeat;
}


@media screen and (max-width:767px) {
	.card-list-page {border:none;}
	.card-img {
		flex: 1 1 100%;
		min-height: 325px;
	}
}

</style>
</head>

<body>
<section class="intro">
  <div class="container">
    <div class="row row-gutter card-list-page">
      <div class="card-img"></div>
      <main>
        <section>
          <h3>HEADING GOES HERE</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          <p><a href="#" class="btn btn-primary btn-news-blog">Read more</a></p>
        </section>
      </main>
    </div>
  </div>
</section>
</body>
</html>
6

Hi, yeah I think I meant to type 320px to target those iphones.

Thanks for the code - it looks like it’s working well. I might just test on some real devices and double check.

Really appreciate your help.

7

No you don’t need to add the min-width:320px media query at all as they are all collected in the max-width:767px media query. If you did add a min-width:320px media query then you miss any devices that are less than 320px and you never know if that may be a future fashion to have smaller phones.

Keep things simple and don’t over-complicate the issue.:slight_smile:

1 Like
8

That’s good advice - thanks for explaining this Paul. I noticed though that the layout falls apart in internet explorer 11 and earlier - is there a way to fix it for that browser?

9

I’m not on a computer at the moment but the usual issue with ie11 is that for the flex basis you need to have a unit supplied even for zero.

e.g. flex:3 1 0%

Notice the percent added to the last value (flex- basis). Don’t add a unit to the first two values as they are different.

I’ll double check in ie11 when I get back this afternoon :slight_smile:

10

Thanks - if you could check that would be great.

Also, would if it’s a calculation for the flex basis as in the example below. That already has the percent but I think this also fails?

flex: 0 1 calc(50% - .5em);
11

Still won’t be back for a couple of hours but I believe there’s a bug with using calc in the shorthand.

Try moving the calc rule to its flex-basis property on its own.

flex-basis : calc(50% - .5em)

I will test when I get back to my computer :slight_smile:

12

Ok back at the computer now and just checked in IE11 and the changes I mentioned will fix the issues in IE11. i.e. If you have a flex-basis as zero then add the percent to it.

For the calc example you would do it like this:

flex: 1 1 50%;
flex-basis:calc(50% - .5em);

Keep the calc in the longhand rule and not the shorthand and then in works in IE11.

2 Likes
13

Thanks very much for that - it’s working now. Just with regard to keeping the flex-basis in longhand, would I need to do this for the flex-grow and flex-shrink also, or can they stay in short-hand? Also, is there an easy way to get flexbox to be backwards compatible?

Thanks again

14

When using calc just do it like I showed you with the 2 rules.

flex: 1 1 50%;
flex-basis:calc(50% - .5em);

You don;t need to do anything to the shrink or grow properties. We are just over-riding the flex-basis so that IE11 can understand it. You have to be careful where you use calc if you need to support IE11 as it doesn’t like it when its mixed with shorthand rules.

Older browsers will just ignore flex so as long as you have a reasonable linear type layout that should be enough. I would avoid adding extra rules just to cater for older browsers as they just muddy the waters. For example you could float or use inline-block for flex items to get columns but it doubles the css and is a pain to maintain.

If you use the developer tools and comment out the display:flex rule you will see how it looks in older browsers (you are basically talking older versions of IE anyway which should not be supported as they are security risks). The first thing you would notice when removing flex is that we get a linear layout but that your background image reverts to zero height. Therefore I would ensure the background image had a minimum height to start with and then it would look ok in older browsers.

It is possible to use inline-block for flex-items and get a similar look but its a bit fiddly and in my mind a waste of time unless you have no choice.

1 Like
15

Ok great - thanks again for the advice.

16

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