Android phone not displaying title text correctly

Illdy
1

Hello support

I’ve attached 2 images of the same page - one on a Samsung phone using Android and one on an iPhone using iOS. The iPhone displays the page title correctly - following the css instruction below:

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
#header .bottom-header h1{
margin-top:-150px;
font-size: 30px !important;
}
}

But the Android phone doesn’t - it’s still using the Illdy theme desktop text size and position - it’s the same on Chrome and Firefox running on the Android phone.

How do I fix this?

thanks

Alan

Theme version is Illdy 2.1.5

2

Hi there

Hope you are having a good day and thank you for your question :slight_smile:

In order to check your question i need to see your live website, please provide url and i will take a look

3

Hi Noda

Thanks for getting back to me.

The url is http://www.tauntoncameraclub.org.uk

Alan

4

HI Alan

this is what I see on my site: Screenshot by Lightshot
I see you are using an old phone, can you please try a different phone?

5

Thanks Noda
That’s the only Android phone I have available to me but the issue was reported by several users of the website and I don’t know what phones or versions of Android they have. As it would seem to be something that is an issue for more than one person and I can’t ask them all to get new phones just to view the website. So I still need to find a fix for it. Is there a solution for older phones/OS?
Thanks
Alan

6

Hi Alan

The problem is that I can’t replicate the problem, sure I want to help but I want to identify what devices are you using to run it in the simulator, that’s why im asking for phone model :slight_smile:

7

Hi Noda

Sorry for the late reply - I had to contact the people using Android phones.

The 2 replies I had were:

Samsung A50 (website issue for these pages in Firefox, Opera or Samsung default browser app. It appears the text formats correctly in the correct position but that there is an invisible layer above the content on the page, so that links on the page cannot be clicked. It selects the page heading instead of clicking a link (image attached).

Samsung Galaxy S6 using Chrome browser. But also didn’t work on Firefox. (This one has the text position and size issue shown in the previous message.

thanks

Alan

8

hey there

Ok, now its better, please add this CSS in appearance - customize - additional CSS

@media screen and (max-width: 500px){
body #header .bottom-header {
padding-bottom: 0px !important;
}
}

Thanks!
Colorlib Support Team

9

Thanks, that has fixed it on the Samsung A50, but not on the Galaxy S6 in either Chrome or Firefox. Any help here would be appreciated.

10

Please clear cache, checking it on my side and it’s foxed for me,

11

I’ll ask him to try again but I know he also viewed pages that hadn’t been viewed before (just in case the cache wasn’t cleared properly) so those should have loaded correctly. Will let you know the outcome.

12

ok, Aygee, please also provide links to affected pages, this will help a lot