How to move a button to the right of an image

I am working with the debut theme and I would like to move a button from its original position in the center, to the right of the image so it is not blocking the picture. Is there some code to enter in order to do this?

Hello Jakehausman,

Can you please specify more clearly for which section you are talking about or else can you please share URL of your site and where you want to do the changes.

Hey there, @Jakehausman

Bo here from Shopify Support!

I would love to help you with this. Could you please send on a screenshot of the image in question so that I can take a look at this and check in with our design team to see how to best adjust this with you. How comfortable are you with adjusting code yourself?

I look forward to hearing from you,

Bo

Hello,

Sorry for the late reply. The url is: https://star69apparel.com/

I am looking to change the button position on the bottom image, “The Classic Collection”, to the right so it does not block the image. The image itself is an image with text overlay.

Hello Bo,

Sorry for the late reply. Here is a screenshot of the Button I would like to change. This section is an image with text overlay and I am using the Debut theme. I am also very new with coding so I am not that comfortable with coding just yet, but I can follow directions pretty well.

Thanks so much for the help,

Jake

Hey there, Jake!

I was offline when you got back to me yesterday and can see that you managed to achieve this yourself. Do you mind sharing how you achieved this in this thread? That way, if someone is looking for the same solution they will see your answer. This helps our community grow and level up together as a whole.

Well done in figuring this out!

All the Best,

Bo

Please add below style code. (This code for debut theme )

@media(min-width:768px){ .slideshow__text-content.slideshow__text-content--vertical-center.text-center{text-align:right!important;} }

Hello @Silverclouding ,

Where should I input this code?

Thanks,
Jake

1 Like

hi @Jakehausman

Insert into theme.liquid before closing tag .

Thanks :slight_smile:

Hello @Silverclouding ,

I inputted the code in theme.liquid but it did not seem to have any effect on the orientation of the button. Here is a screenshot of what I did down below, in case I inputted it in wrong. Is there any other solution that would fix the problem?

Thanks so much for the help,

Jake

1 Like

hi,
We thought you talking about slide show button.
Previous code for slideshow button.

Any way we found your store url ( https://star69apparel.com/ ). We provide you exact code for it .

<style>
@media screen and (min-width: 750px) {
.hero__inner .page-width.text-center { text-align:right!important;}
}
</style>

Please remove the previous code and add this exactly before close tag.

Please see the screen shot :

Hello @Silverclouding ,

Thank you so much for the help. The button was moved to the correct orientation. I truly appreciate your patience.

Thanks once again,

Jake

1 Like

hi @Jakehausman

We are glad to help you. :slight_smile:

Feel free to contact us any time.

Thanks

Silverclouding Consultancy Pvt Ltd

this was incredibly helpful, thank you. however, the button centers again on a mobile device. any idea on how to right align on mobile as well?

1 Like

Hi can you help me as well? I am trying to move my “shop now” button on my website to the right as well.

My website link is : ozonebottles.com

It is not working for me

I tested this and it worked for me to move it to the right. How do I move the button DOWN in the center of the image?

Hello @Silverclouding

I know this is an old threat, but hope you can help me.
I would like to add a button label in the slide show but at the bottom section (highlighted in yellow).
Can you please share a script that will allow me to do so? Apologies, I am new at this and need some help. Thanks so much in advance!

Hello - did anyone fix the problem with the button remaining in centre position on the mobile device? the code works perfectly for the website (moving it to the right), but not for mobile. thanks