Text Overlap on Mobile Landing Page

[spencer93]

Hello, 

I am having trouble with text on a header image staying within the header image on a landing page when viewed on mobile. The text is overlapping with a video that is a just below the header image. How can I keep the text contained within the header image when viewed on mobile. 

Thanks!

[Jsum]

@spencer93,

can you share a link?

[spencer93]

https://app.hubspot.com/content/2449883/edit-beta/5298209986 

[Jsum]

The link you shared is to the page editor in your portal, I don't have credentials to access it. You'lll need to share a preview link.

[spencer93]

Whoops, sorry. Here is the link: 

http://lp.theinstitutes.org/-temporary-slug-2f78293e-f7f3-4521-b6b0-8467ebb89e00?hs_preview=GVzRaPfv...

[Jsum · Accepted solution]

@spencer93,

Check out your css:

.custom-banner {
    background: transparent;
    background-repeat: no-repeat;
    background-position: right-center;
    background-size: cover;
    width: 100%;
    height: 500px;
    position: relative;
}

Your banner has a fixed height applied to it. There are two options to help you. 

1. remove the fixed height, period. Fixed heights should be avoided when possible, especially when styling containers of editable fields in cms templates, because you never know how short or long the content will end of being and with a fixed height there is no adjusting for this.

.custom-banner {
    background: transparent;
    background-repeat: no-repeat;
    background-position: right-center;
    background-size: cover;
    width: 100%;
    height: 500px;
    position: relative;
    padding: 60px 0;
}

Add some bottom and top padding instead and let your section flex.

2. If you absolutely feel the need to use fixed height on your banner, you'll want to use a media query to change the height for mobile, around the width where the issue starts:

@media (max-width: 490px) {
     .custom-banner {
        height: 800px;
    }
}

as a side note, I would also consider using a media query to change your font-size and line-height on the your banner content for mobile.

[spencer93]

Great! Thanks so much for your help.