Docs

[paratusgc]

Hey Guys!
Does anyone know if it is possible to set specific line and padding spacing for mobiles for my H1 and H2 on homepage?

I have already given my subhead H2 a specific class name in order to apply styling but still assign it as a H2 via custom headline feature.

See attached for a screenshot of the problem.

Thanks!
Gavin

[Joao]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[paratusgc]

Sorry – brandmonster.co

[Thai]

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 480px){
    .home #x-section-1 h1 {
        font-size: 32px;
        padding: 0 15px;
    }
    .home #x-section-1 h2 {
        font-size: 24px;
        padding: 0 15px;
    }
}

Hope it helps 🙂

[paratusgc]

Hey Thai,

Great work! Your code fixed the padding issue on mobile for the homepage sub headline.

I’ve checked the rest of the website on mobile and can see a few padding issues remaining.

Are these fixable?

I’ve attached a screenshot so you can see the problem.

Thanks very much!
Gavin

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

@media screen and (max-width: 480px) {
    .home #x-section-1 h1 {
        line-height: 1.1 !important;
    }
    .sectionsubhead {
        padding: 0 !important;
    }
    .home #x-section-2 {
        padding: 100px 0 50px !important;
    }
    .subheadgc {
        padding: 10px 0 20px 0 !important;
     }
}

This should resolve all the issues. Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[paratusgc]

Nabeel that’s perfect – except the testimonial padding didn’t change – I see that was missing off your amends.

Cheers

[Rupok]

Hi Gavin,

Hope you are doing well. Let’s update your code to following :

@media screen and (max-width: 480px) {
    .home #x-section-1 h1 {
        line-height: 1.1 !important;
    }
    .sectionsubhead {
        padding: 0 !important;
    }
    .home #x-section-2 {
        padding: 100px 0 50px !important;
    }
    .subheadgc {
        padding: 10px 0 20px 0 !important;
     }

    .testimonialgc {
        padding: 10px 0 0;
     }
}

Hope this helps.

Cheers!

[paratusgc]

Lovely, thanks Rupok!

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts