Mobile head lines and emails

Hello, on mobile devices my headlines are very large and there is a big gap from the logo to the headline of the page name. How can I make the space on mobile smaller between the logo and headline? I also need the headline font to be smaller on mobile.

I am not sure if this is something you can answer, I noticed that I have an automated email once someone purchases a package. I have it set up so the customer only has to pay a deposit. However, the customers are getting emails informing them that they owe and pay amounts that are not correct. How can I fix this issue.

www.theglassslipperllc.com

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 767px){
    .home #x-section-2 .x-gap {
        display: none;
    }

    .home #x-section-2 h2.h-custom-headline.h3 {
        font-size: 80px !important;
        margin-top: 160px;
    }
}
@media (max-width: 480px){
    .home #x-section-2 h2.h-custom-headline.h3 {
        font-size: 60px !important;
        margin-top: 120px;
    }
}

Hope it helps :slight_smile:

Reply the gap is smaller but still big.

Molly
www.theglassslipperllc.com

Hi Molly,

Unfortunately, I am still confuse with your statement. Please clarify the issue stating which section so we can help you better.

There is a big gap between my logo and headlines on mobile

www.theglasslipperllc.com

Hi Molly,

I can see you have adjusted it already using custom CSS. See this: https://screencast-o-matic.com/watch/cbiqImlOui
Note that I have check it too on mobile device. Can you confirm this is now sorted out?

I don’t really know if I adjusted it enough because the gap is still there on mobile… I am not sure what part of the code to change to make the gap smaller

www.theglassslipperllc.com

Here’s how it looks on my end similar to @Lely.

If that is different than yours, chances are, your looking at the cached version of your page. Please clear all caches including your browser cache.

Thanks.

I am talking about the headline space on my pages not the home page. If you look on the other pages there is a big gap from the logo to the page headlines.

www.theglassslipperllc.com

Hi there,

Please try this code:

@media (max-width: 480px) {
    #x-section-1 {
         margin-top: 0 !important;
    }
}

Hope this helps.

It worked on some pages but not the “book a princess” page or the “package” page on mobile.

www.theglassslipperllc.com

I see it works in the “book a princess” page. For the “package” page, reduce the first section’s top padding on those pages.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.