Moving Text and Button Down on Image Banner for Mobile but Moving Up for Web - Dawn Theme

[JMiller3]

Hi! I’m looking for some coding help to move the text and button down on the image banner for mobile and up for web. We have the Dawn theme.

URL: https://mixedbynasrin.com/pages/events

See below for images of what banners/text/buttons look like now on web and mobile.

[oscprofessional]

Hello @JMiller3

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->section-banner.css>Add this code at the bottom.

@media screen and (max-width: 749px) {
.banner--medium:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
    min-height: 48rem !important;
}
}

[JMiller3]

Thank you so much! That worked for mobile! I didn’t see a change in text and button for desktop–would this be another code? Thanks again!

[oscprofessional]

Hello @JMiller3

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

.banner__content.banner__content--middle-center {
    align-items: flex-end !important;
}

[JMiller3]

Hi there! This did move the text and button down on web but it also moved it down on mobile and it looked bad. Please see attached. See how the button is not covering the text.