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 Expert
723 238 249

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 2 (2)

BSSCommerce-HDL
Shopify Expert
723 238 249

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Moeed
Shopify Partner
3878 981 1226

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 developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️