How can I remove thumbnails and move product title in mobile view only?

Topic summary

Mobile-only adjustments to a Shopify Flex product page: remove the thumbnail slider/arrows, move the product title above the main image, and reduce spacing below images.

Key changes implemented via Online Store > Themes > Edit code > Assets > style.css:

  • Hide thumbnails and carousel arrows on mobile using a media query (max-width: 767px). This targets product-gallery thumbnails and Flickity (image carousel) prev/next buttons.
  • Reposition the product title above the main image in mobile by applying absolute positioning to the title within the product section.
  • Reduce vertical spacing below the product images by setting .product__images margin-bottom to 25px for mobile.

Notes:

  • All modifications are CSS-only and scoped to mobile with @media queries.
  • Screenshots are provided to illustrate the before/after layout.
  • No conflicting views; guidance is step-by-step and specific to the Flex theme.

Outcome and status:

  • The user confirmed the changes worked and requested spacing reduction, which was provided.
  • The helper indicated availability for further assistance; the thread appears resolved with actionable CSS solutions.
Summarized with AI on January 5. AI used: gpt-5.

I am trying to remove the thumbnails slider and arrows from the mobile view of the product page (as shown below).

Also, is it possible to move the product title to the top (in mobile view only), above the main image on the product page? Currently, it is positioned below the main image.
page link: https://testingstoresandthemes.myshopify.com/products/customise-fridgy-600ml-tumbler-grip-range?variant=44597297676533
Theme name: Flex
storefront password: test

Any help is greatly appreciated

1 Like

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > style.css and paste this at the bottom of the file:
@media (max-width:767px){
.product-gallery__thumbnails.product-gallery__thumbnails--bottom-thumbnails.js-gallery-carousel.is-slide-nav--true.flickity-enabled.is-draggable.flickity-resize {
    display: none;
}
.product-gallery .product-gallery__main .flickity-prev-next-button.next {
    display: none;
}
.product-gallery .product-gallery__main .flickity-prev-next-button.previous {
    display: none;
}
}

1 Like

Thank you so much.
Can we move the product title to the top of the page, above the main product image? It’s currently below the main image.

1 Like

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > style.css and paste this at the bottom of the file:
@media (max-width:767px){
.product-template .section.is-width-standard {
position: relative;
}
.product-template .product_name.title {
position: absolute;
top: -36px;
}
}

1 Like

Really appreciate all your help..
Any chance you can help me reduce the spacing here, to half of what it is right now ?

1 Like

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > style.css and paste this at the bottom of the file:
@media (max-width:767px){
.product__images {
margin-bottom: 25px;
}
}

Hello @technase

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.