[Support request] Layout differences in Firefox, Chrome, Edge

[Yolanda]

Hello support,

I’m focusing on my lay-out in difference browser. I work in Firefox, and I still am confused that my site looks so different in Chrome and Edge.
I was hoping the ‘responsive’ era would continue developing, but as far as I can see, it’s only getting worse.

Okay, enough complaining – what can I do, what CSS code do I need, to get my site look similar in Chrome and Edge, etc?
An example, for the body text I’ve set the font on 15 px, but in Chrome it looks huge, while I use in every browser all standard settings, so 100% width (so not zoomed in) and standard font size.

I’ve also asked my (IT) co-worker, and he’s also seeing the same as I see. Also cleared all caches on every place possible.

Do you have any suggestions, tips, how I can influence these layouts?

https://postimg.cc/gallery/Bq9PrZb

Thank you,
Yolanda, NL

[Ying]

Hi Yolanda,

Can you link us to your site?
Although there’s likely nothing we can do, we’ll be happy to take a look!

[Yolanda]

I’m sorry, my site is https://www.yory.nl/

[Ying]

Hum..I check on Chrome and Firefox, and both of them look exactly the same, the upper one is Chrome and the lower one is Firefox.
https://www.screencast.com/t/nIDuK5dHLt

[Yolanda]

Well, that is sort of good news.
Although I see more postings on this forum (and elsewhere) with the same issues, and also the same answers of your support, that you don’t see any differences.
My co-worker had a different lay-out, and maybe others too. What can I do / what would be a good tool to prevent these differences, as shown in my screenshots?

[Ying]

It’s almost impossible to provide suggestions without seeing the issue, I’m sorry about that.

What device are you using? Is it a windows PC? And what’s the resolution setting of your device?

Let me know!

[Yolanda]

We’re both on Windows 10, with Firefox and Chrome (and Edge) in standard settings.
I’ve made a video on https://www.screencast.com/t/y4JXazzB
I’ve also asked a friend to look at my site on Chrome, and he’s seeing the same issue as in the video.

There are more issues on your forum about this, but you always respond with ‘It looks perfect on this side’, and then the thread ends. So if more users are having this problem, there has to be a difference somewhere?

Thank you,
Yolanda

[David]

Hi there,

Do you notice any difference if you view other websites on Chrome vs Firefox ?

[Yolanda]

Hi David,

Yes, I do. I have standard settings in FF and Chrome for font sizes and no zoom in/out.
You will probably say the differences in view is not caused by the theme – but years ago web designers were so happy themes were build as being ‘responsive’ for all devices (in those days). But now those ‘good times’ seems to be gone… I keep reading about designers struggling with all sorts of browsers.
I just wonder – isn’t there a tool, standards CSS or whatever, so all devices (including smartphone, which is btw not solved with AMP) can show the website as it was meant to be / designed for?
There are many tools to check if there is a difference, but I’d like to have a tool that can solve the differences.

Thank you!
Yolanda

[David]

Hi there,

my question was whether you notice a difference with other websites.
For example does https://generatepress.com/ or https://wordpress.org look different when you compare those pages between Chrome and Firefox ?

[Yolanda]

Hello David,

Yes, I see a difference, I’ve made a screenvideo to show you

https://www.screencast.com/t/kmatdbxx

Does that help?

[David]

Well it kinda confirms that something is “different” on your chrome browser.
Do you know if Chrome is up to date ?

[Yolanda]

I just did an update, but didn’t make any difference.
If I change the Chrome zoom to 80%, I have the same view. But that’s not the standard setting, so I’m still curious if there is a code or something I can use – as a wedesigner – to manipulate this.

About the mobile lay-outs; that looks really horrible. I really don’t know what I can do about it.
I’ve installed AMP but that doesn’t do the job. Google is happy (no more warning emails), but the view on mobile looks awful.

Do you have any suggestions for that?

P.s. Is your Chrome setting standard with 100% view?

Thank you again for taking the time!
Yolanda

[David]

P.s. Is your Chrome setting standard with 100% view?

Yes 🙂

Regarding code to manipulate this. Not, not without effecting every other browser, in making chrome show the smaller fonts, then Firefox would show smaller text.

Can you check the settings here:

Especially the Customize Font setting where the font size should be 16px.

Regarding the mobile version, i see an issue on the homepage ie. it has no padding.
Fix that by setting the pages content container to default

https://docs.generatepress.com/article/content-container/

What other issues are you having on mobile ?

[Yolanda]

Hello David,

My settings in Chrome are the exact same as you have.
The only setting that influences the width is to set Zoom to 80%, but still there are big white blocks between the blocks, which are not created by me, and also not shown in FF (as it should be).

About the Container settings: I see a totally different setting screen? I don’t have the option you show. And my paddings are already on 20 left/right.
https://postimg.cc/xNfdyXRM

Another issue in the mobile view is the name of the author of a quote:
https://www.yory.nl/onderzoek-ook-stamboom-moeder/
https://postimg.cc/LYw37MJy

Thank you so much for assisting me with this!
Yolanda

[Author]

Posts