Hi everyone,
Would be very nice if someone can help me out with this issue.
My website is not done yet, but i already see that it looks different on other laptop screens.
On my laptop screen it looks fine, but when someone else opens it, it looks different. Content from one section flows into another section.
You can find a read only link below.
Kind regards
@Samba_M_bow - I’m assuming you are referring to the masthead area and the background image in it?
The issue is you have set your background image to fixed and the width to 100 vw, when the content is forced to grow at a smaller screen size due to limited space it wraps below the space the background image is allow to take up.
I would set your bg image to cover and then position it accordingly, like so:
Which produces this result:
You could then give the section a bit of additional padding to view more of the image if you like:
@sam-g Hi Sam, thank you for your response. I’m not referring to the masthead, but the relationship between the section and its elements.
On my laptop the view is how it should be:
On another laptop it looks like this (where you can’t see the entire section):
You need to use rem units instead of px values → replace all px values with their rem equivalent. When entering an input in a size field, type “(number)rem” to use (note: rem units are NOT ‘em’ units).
PX values are rendered differently across resolutions, whilst rem units stay consistent.
This is not how rem units work. One rem equals to whatever html font size is used. Since by default html font size is set in pixels rems are also a static amount of pixels.
I think you meant vw or vh units.
No, I meant rem units. By default, html font size is not set in pixels. How many pixels cover a rem is set by hardware.
Default html font size is 16px.
Default html font size is 16pt, not px. px values are different to pt values and are dictated by operating system/hardware.
Ultra-high resolutions displays that downscale (e.g. 6k→4k) like Apple’s retina display do some weird things which make px values render differently to rem values comparing e.g. a 13" to a 15" mbpro
I have no idea where you get your info from.
Since the amount of content visible for any particular device depends on the said device resolution - something you cannot control, the best thing to do is to not worry about this. This is how everything on the web is - some devices will show a lot of content, some will show you only part of it without scrolling. It’s a non-issue
