Resolution question

Design help General
1

I may have gone a little too far into my design before realizing that it only looks good at 1920x1080. When I set my resolution to 1366x768 it starts to look scrunched. I am not sure why this is, as the size is set to VW and VH. Thank you in advance

https://preview.webflow.com/preview/empire-financial-consultants?utm_medium=preview_link&utm_source=designer&utm_content=empire-financial-consultants&preview=eb9c8f2045674978bf81fdc0233d257b&mode=preview

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Good morning @Richard_H, how are you?

As for your design, I do not see any issue in your resolution sizing.

The only thing I see an issue with is your navbar. Looks like you took the default nav settings and adjusted them. However, you removed the brand logo link and added your own div block, however, this is not clickable. Also when you shrink the width you lose a portion of it on the left. Check your sizing across all widths.

Imho, I would suggest starting from scratch on the navbar and use a div block to house the logo, the menu and menu button. Add 20px padding on left and right and then you will be safe across all breakpoints.

3

Thank you. I will look into the nav bar here in a little bit.

It’s the content section that gets scrunched at a lower resolution. The heading ends up overlapping the section about it.

4

Yes @Richard_H, it will. Since it is a calendar from google, it will get scrunched at a lower width.

Best thing to do would be to create your own event calendar with Webflow CMS and Zapier and link the two. Unless you just use CMS posts for your events listing and create your own dynamic calendar with Grid 2.0

5

I have no calender…

6

sorry, I confused you with another topic. my bad.

yes yours is just the nav setup.

7

I actually knew that because I read that thread. I just forgot until I had already replied. Haha.

So when I fix my nav it should stop scrunching my content at lower resolutions?

1 Like
8

Well, it will only fix your nav. not the content. Your content will scrunch and shrink at lower resolution because it has nowhere else to go.

On the secondary pages, the shrinking has to do with the 200px margins you have on your text blocks.

Try taking that down to 100. Or for that, I would use Grid elements and set it to 50vw no gap and autofit.

1 Like