Mobile head lines and emails

Support
#1

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

#2

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:

#3

Reply the gap is smaller but still big.

Molly
www.theglassslipperllc.com

#4

Hi Molly,

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

#5

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

www.theglasslipperllc.com

#6

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?

#7

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

#8

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.

#9

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

#10

Hi there,

Please try this code:

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

Hope this helps.

#11

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

www.theglassslipperllc.com

#12

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.

#13

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