Okay
  Public Ticket #2916490
Custom Heading Font size Mobile
Closed

Comments

  •  6
    Moofrad started the conversation
    November 15, 2021 at 10:09am

    Hi

    I am using some custom heading elements on my site, but in mobile view the custom headings for h1 is stuck at 35px. When inspecting the css  i get this: 

    @media only screen and (max-width: 690px)
    .wpb_wrapper h1.vc_custom_heading {
        font-size: 35px!important;
        line-height: 40px!important;
    }

    But i have not set the 35px !Important anywhere, where does this come from? 



  •  1,878
    Judith replied
    November 15, 2021 at 10:19am

    Hi Moofrad,

    Please check the settings here:

    3105909095.png

    Thanks.

  •  6
    Moofrad replied
    November 15, 2021 at 10:35am

    Hi yes i know this, but it seems that the typography and responsive settings override the font settings in the custom heading  font size.. How can I force the custom headings settings?

  •  1,878
    Judith replied
    November 15, 2021 at 10:39am

    Hi There,

    Please send in your website url so that we can check this out.

    Thanks.

  •   Moofrad replied privately
  •  1,878
    Judith replied
    November 15, 2021 at 11:02am

    Hi There,

    Please try this css:

    @media only screen and (max-width: 690px){
    .wpb_wrapper h1.vc_custom_heading {
        font-size: 16px!important;
        line-height: 25px!important;
    }
}
@media only screen and (max-width: 690px){
    .col h2, body h2, .single-product div.product h1.product_title, .nectar-shop-header .page-title, .woocommerce-account .woocommerce > #customer_login .nectar-form-controls .control, .nectar_single_testimonial[data-style="bold"] p, #slide-out-widget-area .nectar-ext-menu-item .inherit-h2, #ajax-content-wrap .nectar-inherit-h2, .nectar-category-grid[data-style="mouse_follow_image"][data-h-tag="h2"] .content {
        font-size: 19.5px;
        line-height: 23.5px;
    }
}

    Thanks.

  •  6
    Moofrad replied
    November 15, 2021 at 11:10am

    I put this only on the page I want it st up right? Because I dont want all custom headings on different pages to be affected by this. 

  •  1,878
    Judith replied
    November 15, 2021 at 11:20am

    Hi Moofrad,

    On which page do you want to make these changes?

    Thanks.

  •  6
    Moofrad replied
    November 15, 2021 at 11:21am

    Right now only on the first page. ( home ) 

  •  1,878
    Judith replied
    November 15, 2021 at 11:43am

    Hi Moofrad,

    Please check it out.

    Thanks.

  •  6
    Moofrad replied
    November 15, 2021 at 11:49am

    Thank you, I need to change it a little, but I cant find the code in the custom css in general settings or page settings. Where did you put in the code?  

  •  1,878
    Judith replied
    November 15, 2021 at 11:56am

    Hi Moofrad,

    I have pasted it here in the css custom code section:

    1834711831.png

    Thanks.

  •  6
    Moofrad replied
    November 17, 2021 at 12:55pm

    Thank you it works fine, I have another problem and that is the font size is to big difference on some screens. 

    I switched from custom heading to text block since it was not google friendly, and tried this code for those screens: 

    @media only screen and (min-width: 2400px) and (max-width: 2700px) {
          .Titleheadh1{
        font-size: 80px !important;
    }

    But this is not working. my h1 looks like this h1 class="Titleheadh1">xxx</h1>

  •  1,878
    Judith replied
    November 17, 2021 at 1:11pm

    Hi Moofrad,

    Please try this css:

    @media only screen and (max-width: 2700px){
    .page-id-1033 .wpb_wrapper h1.vc_custom_heading {
        font-size: 16px!important;
        line-height: 25px!important;
    }
    }
    @media only screen and (max-width: 2700px){
    .page-id-1033 .col h2, body h2, .single-product div.product h1.product_title, .nectar-shop-header .page-title, .woocommerce-account .woocommerce > #customer_login .nectar-form-controls .control, .nectar_single_testimonial[data-style="bold"] p, #slide-out-widget-area .nectar-ext-menu-item .inherit-h2, #ajax-content-wrap .nectar-inherit-h2, .nectar-category-grid[data-style="mouse_follow_image"][data-h-tag="h2"] .content {
        font-size: 19.5px;
        line-height: 23.5px;
    }

    Thanks.

  •  6
    Moofrad replied
    November 17, 2021 at 1:42pm

    This will change all the mobile font size also everything under 2700px? I want to change only to screens with size between 2400-2700px 

  •  1,878
    Judith replied
    November 17, 2021 at 1:56pm

    Please try this 

    @media only screen and (min-width: 2400px){
    .page-id-1033 .wpb_wrapper h1.vc_custom_heading {
        font-size: 16px!important;
        line-height: 25px!important;
    }
    }
    @media only screen and (min-width: 2400px){
    .page-id-1033 .col h2, body h2, .single-product div.product h1.product_title, .nectar-shop-header .page-title, .woocommerce-account .woocommerce > #customer_login .nectar-form-controls .control, .nectar_single_testimonial[data-style="bold"] p, #slide-out-widget-area .nectar-ext-menu-item .inherit-h2, #ajax-content-wrap .nectar-inherit-h2, .nectar-category-grid[data-style="mouse_follow_image"][data-h-tag="h2"] .content {
        font-size: 19.5px;
        line-height: 23.5px;
    }
}
@media only screen and (min-width: 2700px){
    .page-id-1033 .wpb_wrapper h1.vc_custom_heading {
        font-size: 16px!important;
        line-height: 25px!important;
    }
    }
    @media only screen and (min-width: 2700px){
    .page-id-1033 .col h2, body h2, .single-product div.product h1.product_title, .nectar-shop-header .page-title, .woocommerce-account .woocommerce > #customer_login .nectar-form-controls .control, .nectar_single_testimonial[data-style="bold"] p, #slide-out-widget-area .nectar-ext-menu-item .inherit-h2, #ajax-content-wrap .nectar-inherit-h2, .nectar-category-grid[data-style="mouse_follow_image"][data-h-tag="h2"] .content {
        font-size: 19.5px;
        line-height: 23.5px;
    }
}