How to align image to the center on mobile

How to align image to the center on mobile

CreatorTim
Trailblazer
408 1 55

Hi, I need help aligning an image to the center on mobile resolution only for this section:

CreatorTim_0-1738097387337.png

 

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

Replies 2 (2)

topnewyork
Astronaut
1169 154 198

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!

Need a Shopify developer? Hire us at Top New York Web Design
Boost Your Store Sales with Volume/Tier Discount Try Big Bulk Discount
Create New Shopify Store For Just 1$/Month
CreatorTim
Trailblazer
408 1 55

That doesn't work at all.