Problem with different Browsers and devices, viewpoint width/hight, 100%

Clement_Assterich · February 11, 2021, 11:06am

Hey there, I have build this landing page with en Music Cover artwork. I have a problem with different viewpoints. When I open my website with safari, everything seems to be fine. But wenn I open the website with a different browser on my Mac, the cover is getting to big. I have noticed, that the different browser is set to 100% and when I turn it down to 80% its fine again with the size of the cover and the headings.

How can I fix this kind of problem? I want to make sure, that the website looks great on every browser and even when its on 100%. Thx in advance

Here is my site Read-Only: LINK

iDATUS · February 11, 2021, 1:08pm

not enough info if you want a reply.
is the image a page bg, a div bg, a image element.
Remember that everything gets its orders from the container its in.
so if you say div has a width of 1000px or 100%vw the item inside will obey that.

Clement_Assterich · February 23, 2021, 12:25pm

thx for the reply! so its actually a div with a button in it. The button is the artwork cover, so that you can click on it in order to open Spotify. I have set the div block width and height to auto. !

iDATUS · February 11, 2021, 4:14pm

A container does have a fixed width size so that should be fine. Note there is no height fix so using responsive units would alter the output.
Do you have any breakpoints larger than the default desktop?
How is the div with everything in configured?
You could set a max size and leave the other values the same.

Maybe show a screen shot in safari vs the other browser might help.

Clement_Assterich · February 23, 2021, 12:26pm

“Note there is no height fix so using responsive units would alter the output.” → I understand that, but what can I do to get the highth responding to different screen sizes?

I have larger breakpoints. Is that the problem? I thought it would be great to have the cover bigger on bigger screens. Thats the breakpoints:

iDATUS · February 12, 2021, 3:13pm

This is what is confusing me, I just used a section so full width of any breakpoint.
inside that I put a container and as I said it is a fixed sized think is 960px and doesn’t change.
My guess is that you have different things displayed on each browser, like home bar that is changing the viewport space available.
As the container is a fixed size you should be able to work out the max size you want the image to be so as I mentioned do the auto and % etc but set a limit, after all thats kind of what you are saying you want.
Hope this helps