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
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
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Recent Announcements
Similar Threads
Was this page helpful?
