Fluid wrapper
Hi everyone, hope you're doin well! 🙂
I've got a requirements where I should set based on different viewports width, the width of a wrapper container.
Here's the list of breakpoints:
- From 1440 to 1583 it should adapt to the viewport's width with left and right margin of 64px
- From 1584 to 1919 same as before, but with a right and left margin of 72px
- From 1920 to 2560 it should be 80% of viewport's width
- Above 2560 it should be the 80% of 2560 (2048, basically)
I did a first try using media queries to do so, but I wasn't that happy with the result, cause it wasn't that fluid.
I was thinking of using calc() for doin the math, but I'm not quite sure.
I'm 100% sure that the minimum width of the wrapper is 1312px and the maximum is 2048 (as I said in the last point)
Any suggestion? Thanks in advance
16 Replies
what do you mean fluid? As in, it didn't look great while you were resizing the screen?
It's hard to explain, but imagine you're resizing the screen and the container doesn't scale smoothly, but you can clearly see when it's changing
right. No one does that, other than web developers
people just have their browser full screen 99% of the time
responsivity doesn't have to be smooth, because no one is going to be changing their viewport size when viewing your site, and even if they do, they're not going to be paying attention to the content while they're resizing
Just for example, set a base width of 50px to a box and then set a media queries where you set the width to 100px.
When you reach that breakpoint it changes from 50 to 100 immediatly
Just to get the idea
yup, no one is ever going to notice other than other webdevs who are working on your site
Yeah, you're right, ahah!
Anyway, media queries are the only way to scale the wrapper? Or there's some math I can do with calc() to make things easier?
I mean, the easier way was with media queries, but I was curious to know if theres an alternative solution or If I can enhance it
you can probably use calc and clamp, but you won't be close to the mark a lot of the time if that's important. I'd say a combination is probably the most sane, from 1440-1920 you set a margin that's 64px cause the difference between 64 and 72 is just a designer being pedantic
Then from 1920 and up, you set it to 80% clamped to 2560
you can probably even do something like this in a media query over 1920px
Lemme try and see 🙂
Ok, seems fine!
I just add a margin-inline: auto to your code, so it's centered
haha, yeah, good point 🙂
glad it works 🙂
Oh wait
Almost work
Lemme explain
Until 1919 wrapper's div is 1791, then on 1920 it shrinks to 1536
Cause we're setting it to 80%, I guess
that's what the specs request
Maybe it's just me being wayy to meticoulus ahah, but yeah, you're right
It feels strange tho, but it is what is, I guess. Maybe I'll try to speak with the design team to see if it's good for them
you could do something like
width: clamp(1791px, 80%, 2560px);
it'll try to be 80%, but stay between 1791 and 2560px
you wouldn't see the width change until much wider than 1920 though, until 80% is higher than 1791px, so around 2240px widthThis one looks smoother when resizing screen
I guess that's fine for the moment. Thanks for the help! 🙂
no problem 🙂 Remember though, you're probably the only person to ever really resize your site, everyone else just looks at it at a set (but variable) size
Nice to know, I'll keep that in mind. Normally I dont put way too emphasy on that, but in this case the client is quite demanding