Product images not centered on mobile devices

  • Hi there,

    I’m not sure what happened in the last 48 hours with my website, the last few changes I made were adding a favicon, more products, and installing the “Yoast” plugin. My site appears okay on a desktop — besides the captions of products are now really close to the image… and the “Just in” section now has 4 icon links when it originally only had 3.

    The big issue is: when you look at my shop on a mobile device, none of the images are centered vertically in the display column for products. There’s no option in “Appearance” and “Layout” to fix this… I’m really not much of a coder, any help would be greatly appreciated!

    Was this a “Storefront” update issue from the latest version? If I were to uninstall the theme and reinstall it would I lose all of my work? If a Storefront developer could look into this, that would be amazing!

    (It’s driving me nuts lol)

    THANKS!

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)

  • I think this is the same issue I posted before you. The captions don’t line up with the images. I am having my developer son take a look at it…

    This helped improve the display of products. Still need a fix for proper display of categories.Paste in Additional CSS

    img.attachment-woocommerce_thumbnail {
    margin-bottom: 1em;
    margin-left: auto;
    margin-right:auto;
    }

    I put this mess in and added the margin-bottom: 1em; to create a bit of space between the image and the caption.

    ul.products li.product.product-category img, ul.products .wc-block-grid__product.product-category img, .wc-block-grid__products li.product.product-category img, .wc-block-grid__products .wc-block-grid__product.product-category img {
    margin-bottom: 1em;
    margin-right: auto;
    margin-left: auto;

    Try the following in Appearance->Customize->Additional CSS

    @media screen and (max-width: 568px) {
  .storefront-product-section .product *, .site-main .products .product * {
      margin-left: auto;
      margin-right: auto;
  }
}

.products .product img {
  margin-bottom: 20px;
}

    Should center the content on mobile device widths and then also adjust the product title to not be so close to the image on mobile and desktop.

    Thread Starter treefibers

    (@treefibers)

    Thank you for the response @bellabella1212 (I’m really not much of a coder though)

    @jarretc AMAZING!!! It fixed it immediately. Thank you so much!

    I wonder how this happened? Theme coding updates with glitches? I never had that display issue until last week.

    I almost restored a backup of my site before this was an issue. (Using Storefront theme) Now I have a whole new rabbit hole of not being able to access the backups in Bluehost or CodeGuard. SIGH.

    Thanks again! ??

    I am having the same issue with connecting to blue host and my products not being centered on mobile devices. I tried to copy and paste the formula above but it didnt do anything. Am I doing it wrong? I am a super amateur btw, and have been learning as I go. It is all purposed to be on one line or doesn’t matter cuz I have 10 lines right now once I paced the code.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Product images not centered on mobile devices’ is closed to new replies.