Streaming live at 10am (PST)

Auto width divs and column breakpoints help


#1

Hi guys,

Here's what I'm trying to do.

I have a grid of boxes (divs).
Lets say 3 of them positioned horizontally across the page all with the same class name.
I define a minimum and maximum width for the class.
This means that as my browser width goes up and down, my boxes width will go up and down as well, but stop at the min and max values defined no matter the browser width.

Now:
Browser width increasing

As the width of the browser increases,
Increase the width of my boxes,
And once the width of my browser hits a certain amount,
And my boxes have hit their max width value,
Add a new box. (so the gird is now 4 across instead of 3),
And resize all boxes to the minimum defined width. (because there are now 4 columns instead of 3).

As browser width continues to increase, repeat the above steps

Browser width decreasing

As the width of the browser decreases,
decrease the width of my boxes,
And once the width of my browser hits a certain amount,
And my boxes have hit their min width value,
Remove a box. (so the gird is now 3 across instead of 4. By 'remove' I mean break onto a new line),
And resize all boxes to the maximum defined width. (because there are now 3 columns instead of 4).

As browser width continues to decrease, repeat the above steps.


I can't seem to make this work.

  • I can make the boxes (divs) resize in relation to the browser width, but cannot make the grid change the column count in relation to the browser width.

    Or
  • I can make the grid change the column count in relation to the browser width, but cannot make the boxes (divs) resize in relation to the browser width.

Please help me!


#2

Instead of making it inside a column, try making div block next to each other with the min and max width value. Maybe that will work wink


#3

@joshypoo are you using Blocks (divs) to do this and are you setting a percentage width or pixel width? How are you stacking them next to each other - doing Position Relative or Floating them?


#4

Hi guys,

Well I figured it out with help from Vlad.
http://testsite123435345.webflow.com/

Using div blocks with floats worked a charm.
I put each block inside a block set at 33.333% width so I got three columns across, then for the tablet media query I set it to 50% for two columns, and for the mobile media query set it to 100% for one column.
By media query I mean breakpoints.

This works great in the sense that as the browser width increases and decreases:
- my div blocks of content shrink and expend horizontally to maximize the view-port space available

- my faux columns (float-left blocks with % widths) add and detract themslves as I hit Webflows predefined media queries for tablet and mobile devices.

What I can't achieve yet (which I really want to) is have my faux columns add and detract themslves as I hit my own custom defined break-points so that I can control the amount of columns for varying desktop sizes/resolutions.
Example, at 1920px I want 4 columns and at 1280px I want 3 columns.

I guess the above can be done if I was a front-end developer and inserted my own CSS.

Webflow uses
@media screen and (max-width:991px),

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

@media screen and (max-width:479px)

to define the breakpoints. So I would need to figure out how to create my own breakpoints for width greater than 991px.....hmmmm.


#5

We're working on adding a 1200px media query. But in the meantime you can do something described here (adding additional media queries in there if you wish as well):


#6