Hi,
I would like center my text of my product only on my mobile version how i can do that ?
The screen :
The theme : Impact
The link : https://swaap-sb.myshopify.com/
The password : ValentinMatys12!
1 Like
Hi @Matys_hfn
Chekc this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- 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 (max-width: 749px){
.product {
text-align: center;
}
.product-info__price .rating-with-text {
justify-content: center !important;
}
}
- And Save.
- Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi @Matys_hfn Thanks for providing the URL, please add the code in base.css/style.css/theme.css file which ever is available in your theme.
@media only screen and (max-width: 600px){
.product {
text-align: center !important;
}
.product-info__price {
display: inline-block !important;
}
}
If you are not sure where is your base.css file please follow the steps:
- Login in shopify admin.
- Click on the Online Store.
- Then click on the button next to Customize in Theme.
- Click Edit Code.
- Search Base.css/style.css/theme.css in the code in left hand side which ever is available in your theme.
- Add the code given at the bottom of the file.
Result:
If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the changes so that this will work well for you.
Hopefully it will help you. If yes then Please hit Like and Mark it as solution!
Best Regards
Sahil
1 Like
Thank you and for the quantity ?
Hi @Matys_hfn Please add this code where you have added your previous code.
.product-info__quantity-selector {
display: flex;
justify-content: center;
}
Hopefully it will help you. If yes then Please hit Like and Mark it as solution!
Best Regards
Sahil
1 Like
It’s unfortunately offset between the button and the “quantity:”
Hi @Matys_hfn Please add this code as well.
label.block-label.text-subdued {position: relative;left: 35px;}
Result:
Hopefully it will help you. If yes then Please hit Like and Mark it as solution!
Best Regards
Sahil
1 Like
Thank you