Hi,
On my homepage, I have a hero slide image with a text overlay + button on the right side of the page.
Currently, on desktop the button is not aligned centre with the text but on mobile they are.
My trouble is, how can I edit the CSS so that on desktop, the explore button will align centre with the text while not jeopardizing the alignment on mobile?
I tried to add transform:translateX on the CSS but it messes up the alignment on mobile. I also tried to look for other solutions elsewhere but can’t seem to find it.
Basically, I would like that the text and button section is on the right, but they are aligned centre with each other on desktop.
Any help is much appreciated.
Thank you
Here’s a preview link to my site, theme is debut.
https://ajz17vz4f4716j81-23811981376.shopifypreview.com
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset->theme.css and paste this at the bottom of the file:
.hero__text-content.vertical-bottom.horizontal-right {
text-align: center !important;
}
.slideshow-wrapper .hero__text-wrap .hero__text-shadow .hero__link {
text-align: center;
}
Hello @julescm23
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.
For Desktop-
.hero__text-content.horizontal-right {
text-align: center !important;
}
For Mobile -
@media only screen and (max-width: 768px){
.slideshow-wrapper .hero__text-wrap .hero__text-shadow {
text-align: center !important;
}
}
Do you want like this:-
(OR)
@media only screen and (max-width: 768px){
.hero__text-content.horizontal-right {
text-align: center;
}
}
Do you want like this:-
Thanks for your reply, I tried both but they didn’t work.
I would it to be like this:
Hi thank you for your response,
I tried both of them but neither of them worked.
And I actually would like for the text to remain on the right but the button to align with the text. Not to have the whole section in the middle.
Appreciate your help.
Hi thank you but it didn’t work.
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset->theme.css and paste this at the top of the file:
.hero__text-content.vertical-bottom.horizontal-right {
text-align: center !important;
}
.slideshow-wrapper .hero__text-wrap .hero__text-shadow .hero__link {
text-align: center;
}
Hello @julescm23
You can try this code: it will be helpful to you
Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.
@media only screen and (max-width: 768px){
.slideshow-wrapper .hero__text-wrap .hero__text-shadow {
text-align: center !important;
}
.hero__text-content.horizontal-right {
text-align: right !important;
}
}
Do you want like this: -
