Docs

[Gregory Byrd]

Hi,

I must be overlooking something basic – several places on this forum say how to do this but I can’t make it work for me. I am using media queries because I want to change some typography that x-theme doesn’t address via its typography controls.

Below are some media queries that I put into the customizer global css which have no effect at all. Any hints on how to make this work would be appreciated. I am using a child theme and am ok with making changes there if it works better. Site details in next message…

Thanks

@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
{
html body {font-size: 14 !important;}
}

@media only screen
and (min-device-width: 480px)
and (max-device-width: 767px)
{
html body {font-size: 20 !important;}
}
@media only screen
and (min-device-width: 768px)
and (max-device-width: 979px)
{
html body {font-size: 40 !important;}
}
@media only screen
and (min-device-width: 980px)
and (max-device-width: 1199px)
{
html body {font-size: 60 !important;}
}
@media only screen
and (min-device-width: 1200px)

{
x-text {font-size: 88 !important;}
}

[Gregory Byrd]

This reply has been marked as private.

[Gregory Byrd]

Never Mind! (I feel like Rosanne Rossana Dana on SNL (loooong time ago)) – I figured it out.

I had a bunch of problems but once I asked for help it made me look more closely.

the “font-size” didn’t have units

I had some other code targeting the body that I had forgotten was in there

I *think* (not sure) that it only started working after I set the body and content font sizes to “nothing” in the typography panel – I’ll have to check whether that made a difference.

But it is working fine now.

Thanks for helping me by making me think!

[Prasant Rai]

You are most welcome. 🙂

[Author]

Posts