Applying additional css to the mobile version of the theme

Hi Kit

You can do so by wrapping the required rules in a media query:

https://css-tricks.com/a-complete-guide-to-css-media-queries/

https://www.w3schools.com/css/css3_mediaqueries.asp

max-width or min-width are the easiest to use.

Thanks Andrew. That’s helpful, but I’m still struggling to get the wrapping right. For example, I’d like to get this css (which works on the desktop version) to apply to the mobile phone version:

.main-navigation a {
text-transform: uppercase !important;
font-weight: 400 !important;
margin-left: 0px !important;
}

Can you tell me, please, which settings should I use in the @media screen wrapping?

Thanks for the update. Your media query isn’t closed. After the #secondary rule is closed another closing bracket is required to close the media query. Hope that helps.

Thanks. I wasn’t clear — sorry. I know I need to wrap the original css in something like this:

@media screen and (min-width: 480px)?{
? [original css]
}

It’s the (min-width: 480px) bit I’m having trouble with. I can’t work out the right min/mx width settings to use to get it to apply to the mobile version of the theme. Can you point in the right direction, please?

Please, check the /* Sidebar size */ media query. It isn’t closed which means that all the rules below it will be included in the media query. That’s why the mobile rule isn’t applying, because it’s included in the min-width media query.

Or rather, that’s why the menu uppercase change isn’t being applied to mobile.

Ah — I see! I didn’t realize I had an earlier media query. Thank you. I’ll see if it works now.

Ps — Do I need to repeat the css wrapped with the media query for mobiles or can I set an earlier media query so that original css applies to all screen sizes?

Ps I think I understand now how to media queries to specify different css for different screens (and thank you!), but what I really want is to make my additional css apply to all screen sizes by default. The problem is that Vantage seems to ignore my additional css when rendering my site for smaller screens. Is there a way to prevent it doing that, please?

Thanks for the updates. If a CSS rule isn’t wrapped in a media query it will apply to all media.

The media query at the end of your Custom CSS is missing an opening bracket. If you’d like the rule to apply to all media, remove the media query completely.