Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Media Querry not working in Android Browser

Featured Lock Resolved
Hi there,
I have recently upgraded my site to page builder 3.

On my template I have used some css media queries to adjust font sizes on mobile phones.

Since I have updated to PB 3 the media queries are not working on android browser.

For example: I have added following query to my site:


@media screen and (max-width: 640px) {
h1{
font-size: 2.8em !important;
}


You can have a look to my site here.

Now have a look to the big <h1> headtitle. This headtitle is set to 2.8em after viewport 640px has been reached. This is working on all browsers except the android browser. For any reason its not accepting this query on android. I have build up about 20 sites with pagebuilder and never had these problems.

When I adjust the font size with Page Builder 3 Front editing its also working on android browser, but I dont want to use this feature here with the Front Editing.

Can you tell me whats wrong here. See my screenshot from my mobile Galaxy S7 - The headtitle is still standard setting.

Attachments (1)

  • Screenshot_20171122-204830.png
    Screenshot_20171122-204830.png 363.9 KB

7 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
yes,

@media screen and (max-width: 640px) {
h1.sppb-addon-title, h1.sppb-addon-title span {font-size: 2em !important;}
}


but first clear & check your custom code which you added before , maybe in one line you forgot to close }

clear your mobile browser cache as well.

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
Android browser support CSS / CSS3 like any other.
So maybe you should use class name not only HTML header inside your custom code.

Try this

@media screen and (max-width: 640px) {
#lt-slider h1.sppb-addon-title,
#lt-slider h1.sppb-addon-title span { font-size: 2.8em !important; }
}

kweb

More than a month ago #Permalink
Hi Paul,
thanks for your answer. Yes - I never had any problems with it. The changes are shown everywhere, also on desktop when I resize browser window. But only on android browser its not working.

The code you gave me is directed to #lt-slider but my <h1> is not in this div. So I tried


@media screen and (max-width: 640px) {
#sppb-addon-1508918955200 h1.sppb-addon-title, #sppb-addon-1508918955200 h1.sppb-addon-title span{
font-size: 2em !important;
}
}



But it has the same result - not working on android browser. I built up several sites now - never had this problem - only since update to PB 3....

Hope you have another idea.

kweb

kweb

More than a month ago #Permalink
Ok, after some test I found the problem. When I set a font size over "Templates - Typography" this setting will always be taken on android browsers. When I delete font size 56 für h1 its working also on android. But the question is why its behaving like this only on android....

kweb

More than a month ago #Permalink
Oh damn, thanks for the cache advise - it really had something to do with it. Cleared mobile browser cache and the changes are visible now. Thanks.

Paul Frankowski - Staff

More than a month ago #Permalink
hahah, as always code ok, but browser :D


There are no replies made for this post yet.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 141
Toufiq

Toufiq

Total Accepted Answers: 44
Sifat

Sifat

Total Accepted Answers: 16
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 11
Pavel

Pavel

Total Accepted Answers: 5

100+

Templates

200,000+

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam