Shopify themes, liquid, logos, and UX
Hey,
so quick and easy.
my mobile layout on my product page isnt centered. when u click on a product, the picture and the gif (for the shirts with print) arent centered either. could you please help me?
url: sixdreamz.com
Solved! Go to the solution
This is an accepted solution.
HI @sixdreamz ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin -> Online store -> Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
@media screen and (max-width: 749px) {
.product-media-container.media-fit-cover .media {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
margin-left: 15px !important;
}
.product__media.media.media--transparent img {
height: 335px !important;
position: relative !important;
}
}
Step 3: Save and reload home page.
=>> The result:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
@media screen and (max-width: 749px) {
.product-media-container.media-fit-cover .media {
display: flex;
justify-content: center;
align-items: center;
padding: 0;
}
.product__media.media.media--transparent img {
margin: 0 auto;
display: table;
clear: both;
position: relative;
top: 0;
left: 0;
bottom: 0;
margin: 0 auto;
}
}
result
hey, sadly it didnt work. do you know any other solution?
This is an accepted solution.
HI @sixdreamz ,
I have reviewed your requirement, you just need to edit css script and the issue will be resolved. You can follow my instructions!
Step 1: Go to Admin -> Online store -> Theme > Edit code:
Step 2: Search for the file base.css. And add this code snippet to the end of the file.
@media screen and (max-width: 749px) {
.product-media-container.media-fit-cover .media {
display: flex !important;
justify-content: center !important;
align-items: center !important;
padding: 0 !important;
margin-left: 15px !important;
}
.product__media.media.media--transparent img {
height: 335px !important;
position: relative !important;
}
}
Step 3: Save and reload home page.
=>> The result:
I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.
Have a nice day sir!
B2B Wholesale Solution: Streamline your B2B operation with advanced features like wholesale registration forms, custom pricing.
B2B Portal, Quote, Net 30: Speed up purchasing and streamline your quotation process with advanced features like quick order, request for quote.
B2B Lock Password Protect: Easily control access to pages, products, and pricing with robust features.
BSS Commerce - Full-service eCommerce Agency I Use Shopify for 1$ in the first month now
Hi @sixdreamz
You can solve it by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
.product .product-media-container.media-fit-cover .media {
margin-left: 0 !important;
}
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024