Move button in image hero desktop

[Lennart_5]

Hi there,

How can I move the button in the image hero? It is now centered in the middle (see screenshot) and I want it to be on the bottom left. Due to image and text, it would be best if I could fine-tune myself. I found some custom CSS on this forum, but they don’t do anything. My theme is Electronics.

I hope somebody can help me.

[namphan]

Hi @Lennart_5 ,

Please send the website link, I will check it for you

[steve_michael2]

Hi,

kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[Made4uo-Ribe]

Hi @Lennart_5

PLease, share your store URL. Thanks!

[Lennart_5]

Hi! Thank you. Here’s the URL: https://www.detepo.com/

I don’t have a button in my banner at the moment, since it is automatically placed in the center of the picture, and I can’t move it.

Looking forward to hearing from you again.

[Lennart_5]

Hi! Thank you. Here’s the URL: https://www.detepo.com/

I don’t have a button in my banner at the moment, since it is automatically placed in the center of the picture, and I can’t move it.

Looking forward to hearing from you again.

[namphan]

Hi @Lennart_5 ,

Can you add it as a duplicate and send me a preview link? I will check it.

Because it is difficult to check if it is not visible

[PaulMartin_1]

Hey Lennart,

Has this been resolved? If not, I’d be happy to help you out. Let me know.

[steve_michael2]

Can you share screenshot

[Made4uo-Ribe]

Thanks for the info! Can you please add the buttons so I can see where to move them? Thanks!

[Lennart_5]

Hi again! Please see the screenshot below. The button is in the middle below and I would like it to be below the text, so on the left bottom. Would that be possible?

[Lennart_5]

Hi PaulMartin, your help would be highly appreciated.

[Made4uo-Ribe]

Yes, I understand, but currently, I can’t see your button visible on the URL you’ve provided.

[Lennart_5]

If you now go to the URL you will see the button. Looking forward to hearing from you again.

[namphan]

Hi @Lennart_5 ,

Please go to Actions > Edit code > Assets > theme.css file and paste this at the bottom of the file:

.image-hero__text-container-wrapper {
    justify-content: flex-start;
    align-items: flex-end;
}

[Made4uo-Ribe]

Thanks! Just to clarify, the text on the banner is attached to the image, right? That’s why it’s not aligned with the button and isn’t responsive along with it. I suggest using the default header/text input for the banner so it will be responsive.

Here is the code to align on the bottom left, but its only on the desktop.

1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (min-width: 749px){
.image-hero__text-container-wrapper {
    max-width: 100% !important;
    justify-content: flex-start;
    align-items: self-end;   
}

.image-hero__text-container {
     padding-top: 0 !important;
     padding-bottom: 20px;
}
}

• And Save.
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

[PaulMartin_1]

Hey Lennart,

It seems like Namphan and Made4uo has taken the initiative. Thank you to you both

[Lennart_5]

Thank you very much!