Mobile product gallery images under main image

[jpattwell]

Hello, I found the forum post for the code to move the gallery images to the bottom and it all works good on desktop however it didn’t look great on mobile. I would like these to line up in a line or at least center up the squares but I can’t seem to get anything to work when tweaking with the css. Could you assist in making these images look better?

[prakash_s]

Hello John,

Thanks for writing to us.

You use this custom CSS to align the product gallery image in the mobile device. Please add this under X/Pro—>Theme Option —>CSS

@media (max-width: 767.99px)
{
  .flex-control-nav.flex-control-thumbs li {
  display: table-cell;
  }
}

If it doesn’t work for you please let us know with the exact page URL.

The purpose of providing the custom CSS to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.

Hope it helps.
Thanks