How to move image banner text and button from the middle to the right

How to move image banner text and button from the middle to the right

erikoniga
Tourist
13 0 3

Hi guys,

 

after inserting my desired picture in the image banner, I realized that the image banner text position is very bad, since it interferes with the text of the right coffee mug. I was thinking about moving the image banner text and button from the middle to the right . Could you please offer some help with the CSS code? I would appreciate a lot, thanks!

Bildschirmfoto 2024-06-26 um 17.45.26.png

 Thanks.

Replies 9 (9)

BSS-TekLabs
Shopify Partner
635 177 207

Hello.
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution .
For give Gift to customers and Upsell in Cart, check out Salepify: Free Gifts with purchase

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


BSS Commerce - Full-service eCommerce Agency
erikoniga
Tourist
13 0 3

Thanks for the reply, sure, this is the link. https://umr85qcxgg2qeq3h-84864926033.shopifypreview.com

Moeed
Shopify Partner
4386 1132 1390

Hey @erikoniga 

 

Can you share your Store URL and Password if enabled?

 

Best Regards,

Moeed

Need a Shopify Specialist? Chat on WhatsApp


- Custom Design | Advanced Coding | Store Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
erikoniga
Tourist
13 0 3

Hey, thanks for the reply. Sure this is the link https://umr85qcxgg2qeq3h-84864926033.shopifypreview.com

Made4uo-Ribe
Shopify Partner
6991 1665 2057

Hi @erikoniga 

Check this one. 

  1. From you Admin page, go to Online Store > Themes
  1. Select the theme you want to edit
  2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  3. Then place the code below at the very bottom of the file.

 

@media screen and (min-width: 750px) {
    .banner__content.banner__content--bottom-center {
        align-items: center !important;
        justify-content: right !important;
    }
}

 

  • And Save. 
If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

BrainStation23
Shopify Partner
379 57 55

HI @erikoniga 
You can follow this step to achive your result
Go to online store-->edit code-->base.css file and past bellow code

@media screen and (min-width: 768px) {
    .banner__content.banner__content--bottom-center {
        align-items: center !important;
        justify-content: right !important;
    }
}
Brain Station 23 PLC (Mail: js.team@brainstation-23.com)
- Was your question answered? Mark it as an Accepted Solution
- Did the solution not address your concern? We kindly request that share or mail your store URL with us this will enable us to collaborate more closely.
- Explore our Shopify public apps
erikoniga
Tourist
13 0 3

Hi, thanks for the reply, your code improved a little bit, but didn t solve my problem. As you can see in the picture, after applying your code, the text moved only a little bit to the right, but I would like to have more control over the position of the image banner text and be able to move it even more to the right. (Check the attachment, where the black marks are, this is where I would like the text to be.). Thanks a lot. Maybe you can also provide me resources, where i can also learn how to style better with CSS in relation to Shopify.

erikoniga
Tourist
13 0 3

Bildschirmfoto 2024-06-27 um 11.19.43.png

BrainStation23
Shopify Partner
379 57 55

Hi @erikoniga 
Cheng your code little bit
Go to online store->edit code>section-image-banner.css file

  .banner__content {
        padding: 0rem !important;
  }
Brain Station 23 PLC (Mail: js.team@brainstation-23.com)
- Was your question answered? Mark it as an Accepted Solution
- Did the solution not address your concern? We kindly request that share or mail your store URL with us this will enable us to collaborate more closely.
- Explore our Shopify public apps