How to edit the text position and button on banner in mobile view without affecting the web view

Store Design
1

Hi

I would like to move the text and button on the first image banner to the top on mobile view without affecting the web view.

i am using dawn theme

https://click.email.shopify.com/?qs=33c50a4408389bfb311d4ac96e0294b1a8cfe0b48dc71ba7d8d0060648ad5ddb6f055d9bdcdc800ade562333ed78406bf2f1b410a6ca33d0b06e0798fa325059

Password: Testtest-1

I want the text and button at the top and not contradicting with the image banner

2

Hello @mostafa123 ;

Happy to help!! Do you want something like this?

AnkitRawat_0-1648375736297.png
AnkitRawat_0-1648375736297.png1366×768 222 KB

3

Hi

Yes but i also want to move the logo and footer little bit up so that there’s a space between the text and footer

i also want to move (shop all) button above the image

All this only in mobile view (i don’t want to affect the web view)

4

Is this you are asking for?

AnkitRawat_0-1648376931527.png
AnkitRawat_0-1648376931527.png1366×768 225 KB

If this is not what you asking then can you kindly explain your requirements by marking arrows in a mobile view screenshot. It will help me to get more clarity.

5

Hi @mostafa123 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-image-banner.css->paste below code at the bottom of the file:
@media (max-width: 749px) {
    #shopify-section-template--15376751165594__image_banner .banner__media,
    #shopify-section-template--15376751165594__image_banner .banner__media img {
        position: static !important;
    }
    #shopify-section-template--15376751165594__image_banner .banner {
        flex-direction: column-reverse !important;
    }
    #shopify-section-template--15376751165594__image_banner .banner__content {
        min-height: auto !important;
    }
    #shopify-section-template--15376751165594__image_banner .banner__box {
        margin: 0 !important;
        padding-top: 140px;
        padding-bottom: 40px;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

6

AnkitRawat_0-1648376931527.png
AnkitRawat_0-1648376931527.png1366×768 228 KB

7

I want the text on the background of the image like the web view n, got my point ?

what you suggested worked but i want the text on the background of the banner not above it

WhatsApp Image 2022-03-27 at 12.44.15 PM.jpeg
WhatsApp Image 2022-03-27 at 12.44.15 PM.jpeg828×1564 80 KB

8

Hi @mostafa123 ,

You can try add more below code in section-image-banner.css file:

@media (max-width: 749px) {
#shopify-section-template--15376751165594__image_banner .banner__box {
    margin: 0 0 -18%!important;
    padding-bottom: 0 !important;
    background: #f0f0f0;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

9

Thanks A lot