Title font size on mobile devices

Hello,

I’m trying to increase the default title font size for mobile devices on the child theme, but I’m doing something wrong and I’m not able to understand what.

@media (max-width: 480px) {

	div.title-wrapper .woodmart-title-container {
	font-size: 36px;
    }}

Could you help me please?

Hello,

You don’t need to add any media queries for that. You can use the Custom CSS options that are provided in our Theme Settings for different devices.

To change the title of the title elements on mobile devices you need to add the following Custom CSS in the Custom CSS for Mobile area under Theme Settings >> Custom CSS.

body .title-wrapper .woodmart-title-container {
font-size: 36px;
}

Best Regards.

I’d like to add a class to edit only some specific titles. How I have to change the Custom CSS? Thanks.

Attachments:

You must be logged in to view attached files.

Hello,

I saw the screenshot you attached. If you want to do it separately for specific titles then you need to-cart target those classes to change the title size. For example for the class you added you need to use the following Custom CSS.

.mobile-big h1{
font-size: 36px;
}

Best Regards.

Thanks a lot.

Is there a way to apply it only to titles set as <h1>, <h2> or <p> and with a specific class?

Something like:

    .mobile-big .h1 .title-wrapper .woodmart-title-container{
        font-size: 36px;
    }

I would like to apply that font size only to the title, without influence text after title or subtitle.

The code for H1 and H2 in the title element would look like this

.title-wrapper.mobile-big h1.woodmart-title-container{
  font-size: 36px;
}

.title-wrapper.mobile-big h2.woodmart-title-container{
  font-size: 32px;
}

That’s great. Thanks!

[Author]

Posts