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 

 

[DitalTek]

Hi @elotomo ,

Are you want change the position of elements on banner on mobile version, right?

- Make to heading and button to Top Middle

First, you need to check on settings of theme, the theme can support change setting on mobile.

If theme not support, you can follow this code:

@media screen and (max-width: 749px){
   .section-image-with-text-overlay .text-overlay--h-left {
      text-align: center;
      align-items: flex-start;
   }
}

You can copy that code and save to assets/main.css 

To find that file you can got to Admin -> Online Store -> Themes -> Customize Code -> assets

This is result:

[elotomo]

Hi @DitalTek 

Thank you for your help!

Unfortunately, the theme cannot support change setting on mobile.

This doesn't fully solve my problem, because I wanted the text to be at the top above the products, and the button at the bottom below. Could you please help me with this?

[DitalTek · Accepted solution]

@elotomo ,

Yes, 

To do that you can use script code here to add to the file that I mentioned above.

@media screen and (max-width: 749px) {
   .image-overlay--bg-shadow .text-overlay .text-overlay__inner {
       height: 100%;
   }
   .section-image-with-text-overlay .text-overlay--h-left {
       text-align: center;
   }
   .section-image-with-text-overlay .text-overlay__button-row:last-child {
       position: absolute;
       bottom: 20px;
       left: 50%;
       transform: translateX(-50%);
   }
   .section-image-with-text-overlay .text-overlay__button.button-row__btn {
       margin-left: auto !important;
   }
}

This is result:

[elotomo]

Thank you!