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