Archived topic

media query for iphone 5?

5 replies · Started by Alex on July 31, 2019

Viewing posts 1–6 of 6

July 31, 2019 at 5:33 am #972013

Hi there,

I'm trying to get some sub headers on my site to shrink when viewed on an iphone 5 and a Motorola g6

So far I have this but it doesn't seem to be working - any idea what i'm doing wrong?

@media (max-width: 320px) {
.portfolio-caption {

font-family: 'Space Mono', monospace;
    font-size: 55%;
    letter-spacing: 0;
    line-height: 140%;
    hyphens: none;
    color: #bfc4bf;
}
	
	}

Thanks in advance!

July 31, 2019 at 8:32 am #972268

Hi there,

where did you add that CSS? Currently i can't tell where as its being combined in an Autoptimize cache file - which means its being loaded first, then the Simple CSS containing the standard styles is being loaded which is overriding the mobile styles.

Move the styles to the Simple CSS and make sure it is below the existing .portfolio-caption styles.

July 31, 2019 at 8:44 am #972281

Hi David,

Thanks for that, forgot to deactivate the caching plugin!

Originally I had it in 'Additional CSS' rather than 'Simple CSS', which does GP give priority to?

Also, will reinstalling the caching plugin knock out the new mobile styles?

Thanks!

July 31, 2019 at 8:53 am #972287

Simple CSS is loaded before the Additional CSS - so additional CSS rules will overwrite the same rules in simple css. However when you combine CSS and load it as critical CSS using the cache plugin the order gets messed up.

I would advise putting all your CSS in only one of them.

July 31, 2019 at 8:55 am #972296

Thanks David, will give that a go! Thanks for your help, very much appriciated!

July 31, 2019 at 8:56 am #972297

You're very welcome

This archived topic is closed to new replies.

Start building better websites today.