Image Banner Text and Button placement

Solved

Image Banner Text and Button placement

LeandroS
Excursionist
47 1 11

Hello

 

I want to change the placement of my text and button from my image banner to the middle down the image on mobile..

and also change the text color..

Plus is there a way to change the size of the button on mobile only?

 

thanks for the help!

website: r1vrxk-m4.myshopify.com

password: wirul

 

here a screenshot of my image bannerBildschirmfoto 2025-01-15 um 10.27.46.png

Accepted Solution (1)
DaisyVo
Shopify Partner
3688 403 489

This is an accepted solution.

Hi @LeandroS 

 

Is there anything else that you need help? If not, if our answer solved your original problem, please give us a like and mark it Solution. We will be really appriciate

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

View solution in original post

Replies 4 (4)

DaisyVo
Shopify Partner
3688 403 489

HI @LeandroS 

 

To complete your requests, please follow these steps:
Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
Paste the code provided into the Custom CSS section.

 

@media screen and (max-width: 768px){
.banner__content {
    align-items: flex-end !important;
}
.banner__box.content-container * {
    color: red !important;
}
.banner__buttons  a {
    border: 1px solid red !important;
}
.banner__buttons a::after {
    box-shadow: none !important;
}
}


Here is the result: 

image.png

 

I hope this helps

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
LeandroS
Excursionist
47 1 11

thanks! that worked!

 

is there a way to make the button size smaller on mobile?

CodingFifty
Shopify Partner
562 85 105

Hello @LeandroS,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css Add the provided code at the end of the file.

@media (max-width: 768px){
#shopify-section-template--23936902037831__image_banner_8gM7iV .banner__buttons a {
    padding: 0px !important;
}
}

 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
DaisyVo
Shopify Partner
3688 403 489

This is an accepted solution.

Hi @LeandroS 

 

Is there anything else that you need help? If not, if our answer solved your original problem, please give us a like and mark it Solution. We will be really appriciate

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution