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 · Accepted solution]

Hi @elotomo 

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. 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!

[Made4uo-Ribe · Accepted solution]

Hi @elotomo 

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. 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 · Accepted solution]

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;
	}
}