Solved

How to move a button to the right of an image

Jakehausman
Tourist
8 0 3

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? 

Accepted Solution (1)
Silverclouding
Shopify Expert
96 14 28

This is an accepted solution.

hi,
We thought you talking about slide show button. 
Previous code for slideshow button.
 
<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 </head> tag.
button-right.png
Please see the screen shot :
 

View solution in original post

Replies 17 (17)

oscprofessional
Shopify Partner
15830 2369 3072

Hello 

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Jakehausman
Tourist
8 0 3

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. 

 

 

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

Jakehausman
Tourist
8 0 3

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

 

Screen Shot 2019-07-15 at 1.14.50 PM.png

Bo
Shopify Staff (Retired)
1793 196 467

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

To learn more visit the Shopify Help Center or the Community Blog.

Silverclouding
Shopify Expert
96 14 28

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

 

<style>

@media(min-width:768px){

.slideshow__text-content.slideshow__text-content--vertical-center.text-center{text-align:right!important;}

}

</style>

Jakehausman
Tourist
8 0 3

Hello @Silverclouding

 

Where should I input this code? 

 

Thanks, 
Jake

Silverclouding
Shopify Expert
96 14 28

hi @Jakehausman 

Insert into theme.liquid before closing </head> tag .

Thanks 🙂

Jakehausman
Tourist
8 0 3

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

 

Screen Shot 2019-07-17 at 3.30.42 PM.png 

Silverclouding
Shopify Expert
96 14 28

This is an accepted solution.

hi,
We thought you talking about slide show button. 
Previous code for slideshow button.
 
<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 </head> tag.
button-right.png
Please see the screen shot :
 
Jakehausman
Tourist
8 0 3

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

Silverclouding
Shopify Expert
96 14 28

hi@Jakehausman 

 

We are glad to help you. 🙂

Feel free to contact us any time. 

 

Thanks

Silverclouding Consultancy Pvt Ltd

mj123
Visitor
1 0 1

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?

sdc-watches
Tourist
9 0 4

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

Sukie1410
New Member
4 0 0

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! 

Sukie1410_0-1599905873057.png

 

ozonebottles
Visitor
2 0 0

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

shopeverydayede
Visitor
3 0 0

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?