Main Title and Subtitle text - hidden on mobile

Hi guys,

As per other threads on the forum, I can’t get the main title and subtitle text to show on mobile devices. It is critical to the site, as I am using the static page. Essentially, without the text, my home page above the fold on mobiles is an image and a button - not good.

I have tried adding the following media query that you recommended, but no joy:

@media only screen and (max-width: 767px) { .text-slider { display: block; } .text-slider-section { top: 50%; } .text-slider .maintitle { font-size: 24px; } .text-slider .subtitle { font-size: 18px; } }

After doing this I noticed that the text was disappearing at precisely 767px, and so tried changing the max-width down to 480px (Iphone width)as below:

@media only screen and (max-width: 480px) { .text-slider { display: block; } .text-slider-section { top: 50%; } .text-slider .maintitle { font-size: 24px; } .text-slider .subtitle { font-size: 18px; } }

Still no joy as the text was still being removed at 767px. I tried changing the above font sizes to 10px and 5px, to test if the functionality was working (as there would definitely be enough space).

@media only screen and (max-width: 480px) { .text-slider { display: block; } .text-slider-section { top: 50%; } .text-slider .maintitle { font-size: 10px; } .text-slider .subtitle { font-size: 5px; } }

Unfortunately the text is still getting removed at 767px, so I presume it is something to do with a declaration taking precedence?

A fix would be much appreciated! Please note that I am happy for the text font to be scaled down with the page (so long as it is readable).

Just notice I didn’t include the link!

www.latearrivals.co.uk

Hi,

Where exactly have you added this code? It’s not that it’s wrong, it’s just that it isn’t running on your website.

I guess we should really add an option for toggling this text on mobile devices.

I took it out after the failures for neatness.

I have have added it back in (the latest version), and it seems to be displaying between 480px and 767px.

I presume that there needs to some min-max width fields in there?

I would definitely recommend adding that option, because with the static page, having absolutely nothing showing isn’t an ideal solution.

Thanks for the help in advance :slight_smile:

Woops, i meant to say, it is displaying at resolutions BELOW 480, but not inbetween 480px and 767px.

Long day!

You just need to switch 480 in your media query to 767px. I just tested on your site on it works fine if you do this.

And resize your airplane background image please for that row. It’s 6000x4000.