kitfreeman

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?

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?

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

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?

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?

Many thanks. I have to go now, but I’ll try it later and post an update here.

Ah great! I’ll try these. Many thanks for getting me going again!

I’m using the Vantage theme customizer, which shows a live preview of css changes but doesn’t indicate which css codes to use for page elements

Thanks! That works on the category page titles (now italicized), but not on the regular page titles, such as this https://www.keithfrankish.com/the-theseans/ Do they need a separate bit of css? (I’ve tried the browser inspector pane, but I don’t know how to find what I need in the mass of data there)

Thanks Andrew. I added this to my css

#page-header .page-title {
font-style: italic !important;
}

but it doesn’t seem to have had any effect.

Thanks! That did it.

Many thanks Andrew! I’m very grateful for your help, and I apologize for abusing the free service.

Ps One other thing, if I may, please: Why does the menu bar on my site extend beyond the limit of the boxed layout? (I know I should probably start a new thread for this, but since we’re in touch I thought I’d ask it here)

Great. I should be able to make progress now. Thanks for getting me moving again!

Got it! I’ve no idea why I had that code in my additional css! The categories are now showing as titles. Many thanks for you help. Just one more question, please: Will the category page titles now inherit the styling of my page headings or do I need to style them separately with additional css?