Shopify themes, liquid, logos, and UX
Hi, I need help aligning an image to the center on mobile resolution only for this section:
I’ve set the image size to 327x327px using the following code, but sometimes the width of the mobile screen is smaller, causing the image to have more space on the left than on the right. How can I make sure it’s always centered?
Here’s the code I used:
@media screen and (max-width: 749px){
div#shopify-section-template--22711083729161__image_with_text_ejW6Nw .image-with-text__media img, div#shopify-section-template--22711083729161__image_with_text_ejW6Nw .image-with-text__media {
width: 327px !important;
height: 327px !important;
margin-inline: auto !important;
}
Here’s my store: https://1049xn-ya.myshopify.com/
Thanks a lot!
Tim
Hello @CreatorTim Try this code, may be it will help you
@media (max-width: 768px){
.image-with-text__grid.grid.grid--gapless.grid--1-col.grid--3-col-tablet {
margin-left: -4rem !important;
width: 59vh !important;
}
}
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
That doesn't work at all.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025