[Resolved] Not All Media Queries Functioning

[Zachary]

Hi there, first off thanks for developing and supporting such a wonderful theme! The site I’m having issues on is https://ipmconnect.org/virtual-immersion-experience-program/ and is built with GeneratePress + Elementor.

I’m using a header element with a custom class to overlay page titles on featured images, which is working wonderfully, and I input some custom css to style the font of those page titles. Today I adjusted the site’s mobile breakpoint (to 999px), so I went back in to the css to update the media queries for the page title font.

Unfortunately, now only the “@media (min-width)” query seems to effect the title font. For the mobile and tablet parameters, changing the font-size in css doesn’t do anything to the targeted element. The goal is to have three distinct font sizes so the page title scales with screen size.

Here’s the css I’m using:

/*page hero font start*/

@media (min-width: 1000px) {
.page-hero-title {
font-size: 40px;
letter-spacing: 1px;
}
}

@media (min-width: 769px) and (max-width: 999px) {
.page-hero-title {
font-size: 30px;
letter-spacing: 1px;
}
}

@media (max-width: 768px) {
.page-hero-title {
font-size: 25px;
letter-spacing: 1px;
}
}
/*page hero font end*/

[Elvin]

Hi,

You should wrap your {{post_title}} in proper html tags with classes so you’ll have an easier time styling them with CSS.

Example: <h1 class="page-hero-title">{{post_title}}</h1>

You can then remove the page-hero-title class added on the Header Element “Classes” text field.

[Zachary]

Thanks Elvin, I was able to get the look I wanted by adjusting the headings in the customizer.

[Elvin]

Thanks Elvin, I was able to get the look I wanted by adjusting the headings in the customizer.

No problem. Glad you got it sorted. 🙂

[Author]

Posts