Text Overlap on Mobile Landing Page

SOLVE
Highlighted
Occasional Contributor

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!

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Esteemed Advisor

@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.

- Jonathan Sumner
Reply
0 Upvotes
6 Replies 6
Esteemed Advisor

@spencer93,

 

can you share a link?

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor
Reply
0 Upvotes
Esteemed Advisor

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.

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor
Reply
0 Upvotes
Esteemed Advisor

@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.

- Jonathan Sumner
Reply
0 Upvotes
Occasional Contributor

Great! Thanks so much for your help. 

Reply
0 Upvotes