Screen resolutions

I wanted to know how to make a website built with your online tool can be completely compatible with screen resolutions as defined in the following image:

https://d33v4339jhl8k0.cloudfront.net/inline/12887/305a635133f99c012dafda3ac408ab4bfc3aab4f/fdd3429ed0817e466dc38ed060c3c5f7eb57cf8e/screen_resolutions.jpg

I need to show it on a TV but when the page appears the elements of the pages spread around.

Here is the link of the page:
https://preview.webflow.com/preview/creativia?preview=c9c76306bd09fecc61ebe5a840162be9

and here i attached the screenshot of both PC and TV views:

Here is my public share link: LINK
(how to access public share link)

Hi @wguzman, thanks a lot for the good question. I think the issue might be that there is nothing constraining the elements on the page in terms of width. The page looks differently on different devices/monitors, because the wider the display, the more space there is.

If you want to have a consistent look, I would suggest to do one of the following two things:

  1. Use a container to and put your content within a container. Containers are centered horizontally on the page and have a max width of 940px.

  2. Setup a parent element to your content and set the max-width and min-widths to some value that is acceptable to you for your design. This way, no matter the size of the monitor, your content will always be at least a certain minimum width, and no more than a max width on the page.

I hope this helps!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.