How to align the banner text and buttons to be central in mobile view

Store Design
1

Hi, I put this in base.css:

.banner__content {
align-items: flex-end !important;
}

there are two problems with it:

  1. it applies both to mobile and desktop(and I want it to apply only to mobile view)

  2. it made the text and buttons to be at the end. I want it to be a bit higher(to be in the center of the banner).

when I changed: flex-end to flex-center the text and buttons were at the very top and it didn’t look good.

store link: https://sole-dier.co.il/

password: hhhyyy897

if you need any further details feel free to ask me, thank you :slightly_smiling_face:

2

Hi @Noy12 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

BSSTechVenture_0-1716208454496.png
BSSTechVenture_0-1716208454496.png1902×899 133 KB

Step 2: Search file base.css, theme.css or styles.css

BSSTechVenture_1-1716208459770.png
BSSTechVenture_1-1716208459770.png1916×934 101 KB

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (max-width: 749px) {
    #shopify-section-template--20922585612585__image_banner .content-container--full-width-mobile {
        margin-top: 0 !important;
    }
}

Here is result:

BSSTechVenture_0-1716208390250.png
BSSTechVenture_0-1716208390250.png636×787 168 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like
3

Hey @Noy12

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

RESULT:

Moeed_0-1716208485497.png
Moeed_0-1716208485497.png372×668 134 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed