Same website appearance at all resolutions, on all platforms

I would like my website to have the same appearance, at all resolutions, on all platforms. Maybe that’s wishful thinking. I have read that creating an upper level container might help. Not sure how to do that retroactively. Looking for the best and/or simplest solution to do this retroactively, if possible.


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

Please post a shared your read only link.


I guess you just have to make it just using px. So the content is all in a 320px wide div (or something like that). so it looks the same on a phone and on a computer.

If I understand you correctly :slight_smile:

Hi @itbrian40, I think I am reading into the question like @krubens, is this something you are trying to do, where the purplish div in the center is restricted to 320px?

If so, you can check how I did this with flexbox and a div:

Or is the question different?

Thanks for the replies. In fact what I’m looking for is probably quite utopic. I would basically like to have my site look the most similar possible, at all resolutions and on every platform, which, I know, sounds like wishful thinking. I am aware that at different resolutions screen elements may spill over or hide something or even disappear. The same goes for some elements, on different platforms, for the same reason, difference in resolution, but also the difference in aspect ratio. I’m looking for ways to minimize these effects. I don’t want the site to have the same size on all platforms, I would like it to resize according to the platform.

Hi @BrianW

I would suggest learning best practices with responsive design. For example, yes more percentage based units (%, VH, VW) rather than exact pixels.

Also, make sure you understand the box model and how elements stretch:

Hope this helps :slight_smile:

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