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

Solved

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

Noy12
Visitor
2 0 0

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 🙂

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

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

 

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

BSSTechVenture_1-1716208459770.png

 

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

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Partner
2305 834 907

This is an accepted solution.

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

 

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

BSSTechVenture_1-1716208459770.png

 

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

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 😍

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Moeed
Shopify Partner
6719 1814 2198

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 </body> tag.

<style>
@media screen and (max-width: 767px) {
.banner__box.content-container.content-container--full-width-mobile.color-inverse.gradient {
    margin-top: 0 !important;
}
}
</style>

RESULT:

Moeed_0-1716208485497.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications