Hey all, I am trying to make the responsive scaling on my site a little bit more elegant.
I am wondering if anyone has experience with scaling a flexbox uniformly/equally. I just setup a flexbox last night and it looks great at larger dimensions. Whenever you scale the window down however the width is the only dimension adjusted. I am wondering, does anyone know how to scale the height as well so that my pictures stay relative to the the sizes I have when viewed in a large window? Rather than being squeezed towards the end of the desktop view?
If anyone can shed some light on the topic I would greatly appreciate it! Thank you!
What I do is to figure out my w:h ratio and use vw for BOTH height and width of the element.
Say your images are 1280(w)x640(h). That gives you a 2:1 w:h ratio. What I’d do is set the width to 20vw and the height to 10vw. That way they scale and are always the perfect aspect ratio.
You can do the same with any element. If you’ve got a full-width flexbox that you want to maintain the same w:h ratio, you would just set the width to 100vw and the height to 50vw. Tying width AND height to the viewport width is a great trick for achieving what I believe you’re looking to do.
Thanks for the quick reply! VH and VW are nice little tricks. Though the way I have my flexbox setup I am unsure where to apply those settings.
My “container” is a div block I setup to be 1300px wide instead of the standard 960 container and its placed within a section that has left and right margins setup as auto. So once my container reaches 1300 pixels it doesn’t grow anymore and when you shrink the window the section effects the container so that it shrinks accordingly. Would you apply the vw/vh settings to the section, container, or the individual div blocks in my flexbox?
I would use vw to set both width and height (with 100vw as the width) and put a maximum width of 1300px and a maximum height of whatever fits your ratio.
Edit: Forgot to answer your question. You want to put these settings on the container element.
This makes perfect sense to me but for whatever reason I can’t get it to work. It might be the way I have the flexbox setup.
To make the flexbox I put 3 div blocks inside my container. I am setting a custom height in each of those div blocks(in this case my first row is 375, second row is 797, and third row is 375) so when in a large desktop view of 1920x1080 that’s what you are seeing. If I get rid of those settings what will decide my height of each div block section?
Sorry if I am being difficult, I really appreciate your input!!
Ah! Ok. Then what is happening is your fixed-height elements are overriding the container height. If you get rid of those settings, then the height of each div block section would be decided either by the flex child setting you give it, or the content of the div block. Since you are dynamically sizing the container with a set value (the vw), then you could size your rows by %, if you are married to each having those specific aspect ratios. Be aware that this will be broken if your content gets too big for the constrained divs.
Gotcha, that helps a bunch. I think I am going to try to rebuild my flexbox with percentages in mind rather than set pixels. I’ll report back and see if I can get this working, thanks for your help!
Yay! Just got it working!!! After setting up the percentages correctly(25,50,25) to each div block(flex parents) I applied the vw setting to both the width and the height to my container and it worked like a charm.
I never would have thought to add vw on the end to the height setting for the container, that’s such a small little tip but makes all the difference! Thank you so much!!!
