Streaming live at 10am (PST)

Optimize for 4k display?

hey guys,

my client is using a 4k Mac Display, whilst Webflow allows optimizing for 1920 max? I know I can set up the canvas size, but If I customize the page for a larger resolution, how do I make sure that it would look good on 1920 too?

Also if he has a 4k screen, which Canvas size I should use as optimal?

Thank you


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

Webflow doesn’t necessarily optimize for 1920 max, but instead gives you up to the 1920px wide resolution to define style changes natively. If you have needs outside of that size—like if you wanted to create two extra “breakpoints” for 1440p and 4k—then you’d just need to define some additional media queries with custom code.

If you can make sure your project is setup to handle these larger sizes as gracefully as possible there should be minimal adjustments needed on your elements at these two new (fictional) breakpoints.

Not sure how comfortable you are with CSS, but you can reference the CSS Preview in the Designer to get an idea of how you’d need to change any particular elements and I’ve included a couple resources on media queries below to get you started:

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

https://www.w3schools.com/css/css3_mediaqueries.asp

All that said, I wouldn’t spend too much time worrying about these sizes other than making sure they work somewhat well as the usage is pretty low—and even then, folks who have 4k monitors don’t always browse websites in full screen. I remember when I worked on an iMac at my previous job I would take advantage of the real estate and have windows take up a percentage of the width so I could multitask with other software.

Do you have an example of how the site looks and what you think would make it respond better? I’m sure folks would have some better suggestions if we knew exactly the issue, but if you’d rather keep it to yourself (or your client prefers the project be kept secret) then my suggestions above should point you in the right direction :+1: