Home Forums WoodMart – Premium Template Title font size on mobile devices

This topic contains 6 replies, has 3 voices, and was last updated by  Giulio 2 days, 5 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #197222

    Giulio
    Customer

    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?

    Private Content Hidden
    #197245

    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.

    #197248

    Giulio
    Customer

    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.
    #197258

    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.

    #197297

    Giulio
    Customer

    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.

    #197409

    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;
    }
    #197422

    Giulio
    Customer

    That’s great. Thanks!

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Title font size on mobile devices’ is closed to new replies.