Designers windows differs from published

Noticed how the scaling of the design windows to match centain smart phones display moves things around a bit? Anyway to prevent that? If you go from the thinnest smallest screen to a big note5 ir iphone plus screen, the content moves a bit. How do you guys go about this?


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

I wish I could see one of your page in a public link so I had a sense of what distrubs you, how much you feel that your page “breaks” when the viewport width varies.

Within a breakpoint, you got to make things “elastic”, a k a adaptative. That’s the reason you want to use % values as much as possible, so elements fill the space they have. If you want things to stay absolutely the same pixel size, then you have to set absolute sizes for the smallest viewport, then center everything so increasing the viewport width within the breakpoint will only add left and right padding space and the content will stay identical. But adaptative is good, as long as it doesn’t break your designs. There is always a way.

Ahh… makes total sense. Im still building the site , nothing really to see. But I’ll make sure i use the center everything when i needed to.

Heres something lots of people will come across. The hero picture. If i opem it in a older 4:3 screen laptop, the picture shows up but its tiled. The picture replicates and on the buttom it’s cut off. How can the hero image be contained so it never tiles? And is there a standard resolution for it? How would you go about in finding out what the pixel count is in the hero container or body holding it? Id imagine it’s a set resolution with no need of a higher res for people to click and see bigger. Much appreciated the support.

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