Adapting the banner on the home page to the phone version - image with text overlay

[elotomo]

Hello,

I would like to adapt the banner on the home page to the mobile version.

More specifically, I would like the heading to be at the top in the middle and the button at the bottom in the middle (something like the example photo below).

My store: https://www.drollsport.com/

Password: Wixa

Theme: Symmetry

[Made4uo-Ribe]

Hi @elotomo

Check this one.

1. From you Admin page, go to Online Store > Themes
2. Select the theme you want to edit
3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
4. Then place the code below at the very bottom of the file.

@media only screen and (max-width: 599px) {
    .text-overlay__text {
        display: grid;
        grid-template-rows: auto 1fr;
        height: 55vh;
    }
    .text-overlay__inner {
      margin: auto;
}
}
@media only screen and (max-width: 449px) {
    .text-overlay__text {
    height: 40vh;
     }
    .text-overlay__inner {
    margin: auto;
    }
}

• And Save.
• Result:
• 

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[EBOOST]

Hi @elotomo ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/main.css
3. Add code below to end of file

@media(max-width: 749px){
	#shopify-section-template--21235606257999__image_with_text_overlay_HXew7Y .text-overlay--for-banner .text-overlay__inner {
		height: 100%;
	}
	
	#shopify-section-template--21235606257999__image_with_text_overlay_HXew7Y .text-overlay--for-banner .text-overlay__text {
		height: inherit;
		  display: flex;
		  flex-flow: column;
		  align-items: center;
		  text-align: center;
	}
	#shopify-section-template--21235606257999__image_with_text_overlay_HXew7Y .text-overlay--for-banner .text-overlay__text .subheading,
	#shopify-section-template--21235606257999__image_with_text_overlay_HXew7Y .text-overlay--for-banner .text-overlay__text .text-overlay__title{ 
		margin-left: auto;
		margin-right: auto;
	}	
	#shopify-section-template--21235606257999__image_with_text_overlay_HXew7Y .text-overlay--for-banner .text-overlay__text .text-overlay__button-row {
		margin-top: auto;
	}
}