Responsive view in WP admin different than live view

This topic contains 8 replies, has 2 voices, and was last updated by  Sebastian 2 months, 2 weeks ago.

Author Posts

Petran

Hello,
When working on a site I noticed that the view on WP admin is different then the one on my mobile phone or in the FF, Opera or Chrome responsive mode. On the mobile phone and in the browsers responsive mode my title is how I want it, but in the Micro-themer view the title is pulled apart. Steel-brothers becomes Steel- and, on a second line, brothers.

I made my media Query for a Samsung phone (360px). Perhaps i did this wrong somewhere, but I can’t find out what.

Regards,
Petran


Sebastian

Hey Petran,

Would you mind sending me a link to the page you’re working on? You can use our contact form to send privately if you prefer?

When an actual mobile phone displays things differently to the mobile preview in Microthemer it can sometimes because the viewport zoom level needs to be set to 1 via General > Media queries:

Set viewport zoomto 1

From what you describe, I don’t think this is likely to be the issue, but worth mentioning just in case. I should know more once I’ve taken a look at your site.

Cheers,
Sebastian


Petran

Hello Sebatian,

Changing the viewport zoom did not affect the view.
You can visit the site here: https://steel-brothers.nl

This screenshots can clarify my problem:

The view of my Samsung S6 is equal to screen 2 (Firefox)

Regards,
Petran


Sebastian

Hey,

Thanks for sharing the screenshots Petran. I wonder if Microthemer is actually displaying the preview at 361px instead of 360px. It might seem counter intuitive that the text would wrap over two lines if the screen size it bigger, but I can see a style rule that kicks in at the 360 mark to reduce the font-size. This doesn’t apply at the 361px mark, so the font-size is too big to fit on a single line at that screen size.

It might be a browser-specific issue that needs a fix. To figure out why Microthemer might be displaying the preview one pixel off I would need to access your site and inspect the interface. If you don’t mind providing me with access, please send credentials via our secure contact form. You can use this handy plugin to temporarily share access without creating a new account: https://en-gb.wordpress.org/plugins/temporary-login-without-password/

Cheers,
Sebastian


Sebastian

Hey Petran,

Thanks for providing access.

I just checked using Firefox and Chrome on my windows laptop. The text covers just one line in both browsers. What browser and operating system are you using?

I did notice that the text displays slightly bigger in Firefox than it does in Chrome. And so I wonder if differences in text rendering between browsers / operating systems might be the cause of your issue, rather than MT’s preview width being out. If the text displays a notch bigger that what I see in Firefox at your end, that could explain why the text spans two lines.

Cheers,
Sebastian


Petran

Hello Sebastian,

I’m using Firefox on Ubuntu.
I just tried Chrome and Opera and they are showing things right. Seems to be a FF-thing than.

Is there a solution for this besides getting away from Firefox?

Regards,
Petran


Sebastian

Hey Petran,

I can’t think of anything Microthemer can do to mitigate the variable text rendering between browsers. When I inspect the computed font-size in Firefox at 360px screen width it say 42px – just like the other browsers. So it’s a bit of a quirk.

You could set the font-size to 40/41px on the 360px tab as one way to deal this issue without changing your browser.

Cheers,
Sebastian


Petran

Hello Sebastian,
I guess that’s the best solution then.

Thanks for your support.

Regards,
Petran


Sebastian

You’re welcome Petran 🙂

You must login or register to reply to this topic.