Media queries and responsiveness

Support
#1

Hi, I’m trying to add custom media queries to my website.
I put it into the custom css and it simply doesn’t work.
I can’t seem to figure out what I’m doing wrong.

Here is a sample code:

@media screen and (max-width: 979px){
.title-about{
font-size: 10px;
}
}

thanks

#2

Hi Hennie,

Thanks for reaching out.

It’s correct, and adding @media doesn’t mean it will be responsive as you still applied a fixed value of 10px. Would you mind providing a sample URL where this should work?

For the meantime, you can apply !important too, example

@media screen and (max-width: 979px){
.title-about{
font-size: 10px !important;
}
}

Thanks!

#3

Thanks, I added !important and it worked. Why does the @media only work with !important?

#4

Hi Hennie,

It’s not about @media, it’s loading priority. There is another CSS prioritized and loaded after your CSS, adding !important will make it prioritized. Again, it has nothing to do with @media.

Thanks!

#5

Is there a better way for me to go about this or adding !important on @media is the way to go if I’d like to change padding, margins etc for different screen sizes.
thanks

#6

Hi Hennie,

It’s a trial and error, try the first one and if it’s not working then add !important too. And about styling for different sizes, yes, you could do it, example,

@media screen and (min-width: 980px){
.title-about{
font-size: 16px !important;
}
}
@media screen and (max-width: 979px){
.title-about{
font-size: 13px !important;
}
}
@media screen and (max-width: 767px){
.title-about{
font-size: 10px !important;
}
}

Now, that’s responsive since you use multiple @media with different styling values. And again, it can be with !important or without it, use the one that will work. There is no way you can predict when !important should be used since Wordpress has themes and plugins from different authors and they loaded their own CSS with different priorities, it’s a trial and error :slight_smile:

Thanks!

#7

Thanks so much. You really helped me tonight.
I was almost going to give up…
:grin:

#8

You’re most welcome.

For more information, please take a look at this:

Hope it helps :slight_smile:

#9

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