I am having some issues with my responsive layout when it comes to non-standard resolutions. Both of my work monitors have poor resolutions and the site looks terribad on these monitors, but look perfect on my mobile and home computer (1080p).
I don’t have access to any 4K monitors so I have no clue how the site looks there, but my current monitors are 1280x1024 and 1440x900. The site looks really whacky on both of these resolutions.
Is there a way I can adjust the settings for these nonstandard resolutions in webflow?
Desktop is >991 px. You are using full width wrappers. To visually see what happens when you scale down to 992px width, grab the vertical grey bar between the left menu and your layout. Drag it to desired pixel width. You can’t add a new breakpoint in the designer, but you can work on your layout elements to get the behavior you want.
It is possible to add custom css to target a new breakpoint and elements with in its dimensions. But you may be better off using a container or custom container to establish content width.
On my 5k monitors the text elements are really wide and hard to read. Same on 4k. Not a design choice I would recommend. I am fine with fluid design, just believe that centered content within fluid elements is a better for usability. People don’t like to hunt much.
@webdev Yikes. I had a feeling it was a mess in 4k+ too. Unfortunately do not have access to a monitor with high resolution to see and change.
Can you post a screenshot of what it looks like on your monitor so I can see? What do you mean by “fluid elements” how can I adjust so it doesn’t look like crap on 4K or is it best to invest in 4K monitors and adjust that way.
You are not going to be able to change how wide elements of a 100% width (fluid) div grow. That depends on the visitor viewport. On a 4k monitor, just imaging everything growing out left and right as it expands to 3840 pixels (3.75 X) your 1024px reference.
Looking