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

Shopify Discussion
,
1

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
Bildschirmfoto 2024-06-26 um 17.45.26.png1275×799 212 KB

Thanks.

2

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.

3

Hey @erikoniga

Can you share your Store URL and Password if enabled?

Best Regards,

Moeed

4

Hi @erikoniga

Check this one.

  1. From you Admin page, go to Online Store > Themes
  2. Select the theme you want to edit
  3. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
  4. 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.
5

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

6

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

7

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;
    }
}
8

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.

9

Bildschirmfoto 2024-06-27 um 11.19.43.png
Bildschirmfoto 2024-06-27 um 11.19.43.png1380×539 561 KB

10

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

.banner__content {
        padding: 0rem !important;
  }