Media query not functioning for responsive text class

Support
#1

I have the following in my global CSS:

// Align text center on mobile.
@media (max-width: 767px) {
.cana-center {
text-align: center;
}
}

And then I put cana-center on the class of my text element. I see the class there when I look at it in Chrome dev tools. But it the text-align is not being added when going to smaller than 767px screens.

I’m confident I’m doing something stupid but I’ve been banging my head against this and can’t figure out what I’ve done wrong.

URL https://www.cana.net/cisco-meraki-cloud-networking/

#2

Hello Mark,

Thanks for writing in!

Please use following code in Pro > Theme Options > CSS:

@media only screen and (max-width: 767px) {
  .cana-center { 
text-align: center;
}
}

Thanks.

#3

Hi Prasant, sadly it is the same result.

no text-align: center; unfortunately.

this is the current global css -
// Align text center on mobile.
@media only screen and (max-width: 767px) {
.cana-center {
text-align: center;
}
}

#4

Hello Mark,

Thanks for updating in!

Your custom css is broken because of invalid characters.
Please remove the commented line and any occurrence of “//” in your css code:

// Align text center on mobile.

To properly have a css comment line, you use this /* comment texts */.

For more details, please check out this link:

#5

hah! and that’s what I get for staring at a problem for too long. I knew it would be something stupid! :slight_smile:

thanks!

#6

Glad we could help, :slightly_smiling_face:

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.