CMS Development

spencer93
Participant

Text Overlap on Mobile Landing Page

SOLVE

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!

0 Upvotes
1 Accepted solution
Jsum
Solution
Key Advisor

Text Overlap on Mobile Landing Page

SOLVE

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

View solution in original post

0 Upvotes
6 Replies 6
Jsum
Key Advisor

Text Overlap on Mobile Landing Page

SOLVE

@spencer93,

 

can you share a link?

0 Upvotes
spencer93
Participant

Text Overlap on Mobile Landing Page

SOLVE
0 Upvotes
Jsum
Key Advisor

Text Overlap on Mobile Landing Page

SOLVE

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.

0 Upvotes
spencer93
Participant

Text Overlap on Mobile Landing Page

SOLVE
0 Upvotes
Jsum
Solution
Key Advisor

Text Overlap on Mobile Landing Page

SOLVE

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

0 Upvotes
spencer93
Participant

Text Overlap on Mobile Landing Page

SOLVE

Great! Thanks so much for your help. 

0 Upvotes