Breaks points no break points - confusion City :-(

Hi from about to snow York UK,

I’ve been practising with flex box and in the tutorial i added a break point:

@media screen and (max-width:400px)
{
  .site-main-content {
    flex-direction:column;
  }
}

All efforts here:

My question is please having read this:

I’m so not sure if I need breakpoints or not when it comes to designing layouts using flexbox :frowning:

Just for further info its flex box I’m committing time to learning and i want my futures site to be “Responsive” to mobile devices.

Thanks,
David

If the design “breaks” at a certain width, add a breakpoint at or near that width (I usually go a bit before the actual width). adding CSS rules until the design is good. Rinse - repeat.

3 Likes

400px is too small as the site clearly needs to start reforming around 800px as 3 columns are very small at that point. You probably want to go to 2 columns at around 800px and then around 500px go to one column.

Forget about specific device breakpoints and just use your eyes.:slight_smile: It is very clear that around the 800px mark the three columns are squashed very small and should you have any real content inside then you would need to make more room for the content.

Adjust the design when the design needs to change and in that way you cater for all devices.

Just because you use flexbox doesn’t alleviate the need to change the design as the viewport grows or shrinks unless you have a linear wrapping type of design. You can include min-width in your flexbox element rules to stop elements getting too small but that doesn’t work in IOS properly so you are better off using media queries to bring it all under control.

Some simple flexbox layouts can work without media queries but they are usually straightforward designs. Most of the time you want to move the side columns properly and arrange the content better as you get smaller.

2 Likes

It is possible to make a layout without breakpoints with flex. This is a variation on your’s without any breakpoints:-

I’m using the flex-basis to control when an element wraps to a new row, instead of using min-width.
Though in reality it is probable that you will need a query for something as things progress, so maybe just accept the idea.
It’s easy enough to spot if and when you do need a query just by dragging the side in and out. If the layout stands up to it, no query required. If it all goes pear shaped, you need a query, then identify the point (width) at which things look awkward to determine your break point.

3 Likes

That’s a good example but the main problem I have with that approach is that you can never be sure the device is wide enough for the basis you have set (e.g. 30em).

This is what happens at small screens in your example.

You can of course use magic numbers again and change the flex:4 0 30em to perhaps flex:6 0 0% and that will work but is guesswork again (although it should raise no issue).

(As an aside note that min-width is not supported in IE11 unless its on nested flex containers. (e.g. you would need to add a wrapper that is display:flex and flex-direction:column for the min-height to take effect in IE11). )

In my haste forgot to enable flex-shrink to cope with screens less than the basis.
Make that flex: 4 1 30em; to allow shrinking.

Note: That still gives scrollers, but that’s only because of the long unbroken URL string I have there. Normal text will be fine.

2 Likes

Yes that works :slight_smile:

If I’m going to make an excuse, it was the URL that prevented me noticing the error. I assumed that to be the cause of the lack of shrinking, so never spotted that I neglected to add it.
If it had normal text there I probably would have picked up on it at the time.

2 Likes

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