move email sign up banner to bottom centre in mobile view

Technical Q&A
,
1

I want to move the email sign up banner from centre of image in mobile view to bottom centre of image like in desktop view.

My website is - www.magmathelabel.com

Also does anyone know how to remove the white space after the image?

Any help will be appreciated,

Thanks!

2

Hi @magmateam

Please follow the instructions below.

  1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
  2. Go to Asset folder and open the base.css file
  3. At very end of the code, add the code below
@media only screen and (max-width: 750px) {
div#Banner-template--16661880471777__main {
    height: 100%;
}

.banner__content.banner__content--bottom-center.page-width {
    display: flex;
    align-items: flex-end;
}
}

Result here:

made4Uo_0-1684341488987.png
made4Uo_0-1684341488987.png926×855 425 KB

3

  1. Locate the CSS file: In the code editor, navigate to the “Assets” folder and find the CSS file related to your theme. It may be named something like “theme.scss.liquid” or “styles.scss.liquid.”

  2. Add custom CSS: Open the CSS file and add the following CSS code at the end:

@media (max-width: 767px) {
  .home-section-1 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .home-section-1 .newsletter-form {
    margin-top: auto;
  }
}