[Closed] Astra x Toolset – mobile view not using template style/CSS settings ?

[Author]

Posts

[ryanO-3]

I am trying to: style a toolset post (typography and image). The settings work on PC view. But when viewing on mobile screen, it is using the default Astra global theme settings for typography. I've also noticed image style settings (e.g. rounded corners) are not being observed on mobile devices. I am observing these issues while going to page with iphone and ipad (not while re-adjusting window size)

Link to a page where the issue can be seen: hidden link

I expected to see: button font size for "Share" to font size 42px on mobile.

Instead, I got: button font size 16px (Astra theme global typography body size font setting). This is one of many examples where mobile style settings are not being applied when viewing on mobile device.

[Nigel]

Hi there

When I visit your site in my desktop browser I can see buttons which, upon inspection, have a font-size setting of 1.3em on the text span itself, and which also have a font-size setting of 1.3em on the parent link element. em units are relative sizes, relative to their parent, so my understanding is that they would be cumulative.

In any case, the size on the screen is large.

When I visit the same URL on my phone the buttons are also large, clearly larger than 16px. (I didn't set up remote debugging for my phone to inspect the element, but it is visually obvious.)

Do you have any more examples?

I think we would likely need access to your site to see you set up, in any case, so let me set a private reply for you so that you can share credentials where we can verify what you have set up.

You may want to create a temporary admin user for us to use that you can later delete. And be sure to have a current backup of your site.

[Nigel]

I checked again on my phone and see the image with square borders (that's the simplest thing to check), and when I visit in a desktop browser I also see the square borders, I don't see the round borders from your screenshot.

But looking at the screenshot, I see that you are logged in on the device which shows the rounded image borders, and not logged in where you have square borders (the same as I've been seeing, visiting your site in both mobile and desktop not logged in).

So that appears to be the issue, not device or screen size, which I confirmed by logging in to your site and revisiting the page.

Can you removing caching and other optimisations to see if you can determine what specifically accounts for the difference?