Aligning title on individual product page - Bedford/Hayde?

Site URL: https://www.malugarcia.com/shop/tennis-i-limited-edition

Hi! How can I adjust and space out (with padding) my product title on individual pages for mobile? I want it centered with some breathing room. Thanks!

9 minutes ago, malug said:

Site URL: https://www.malugarcia.com/shop/tennis-i-limited-edition

Hi! How can I adjust and space out (with padding) my product title on individual pages for mobile? I want it centered with some breathing room. Thanks!

Is it the result you want to achieve?

hi there! yes this is what i am looking for, thank you... however with some padding between the bottom of the title and the image. on that note, is there a way to also center the image previews?

12 minutes ago, bangank36 said:

Is it the result you want to achieve?

hi there! yes this is what i am looking for, thank you... however with some padding between the bottom of the title and the image. on that note, is there a way to also center the image previews?

12 minutes ago, malug said:

hi there! yes this is what i am looking for, thank you... however with some padding between the bottom of the title and the image. on that note, is there a way to also center the image previews?

Try in Home > Design > Custom Css

@media only screen and (max-width: 767px) {
  #productSummary .product-title.mobile {
    text-align: center;
    margin-bottom: 20px;
  }

  #productGallery #productThumbnails {
    display: flex;
    justify-content: center;
  }
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

Worked great, thank you!! 😀

Is there a way to edit the text that says "BACK TO THE SHOP" ? Would just like for it to say "BACK"

As well as remove the share button at the bottom of "Add to Cart"

2 hours ago, malug said:

As well as remove the share button at the bottom of "Add to Cart"

Add this to Custom Css to remove the share button

#productSummary .product-sharing {
  display: none;
}

3 hours ago, malug said:

Worked great, thank you!! 😀

Is there a way to edit the text that says "BACK TO THE SHOP" ? Would just like for it to say "BACK"

Adding to Home > Settings > Advanced > Code Injection, choose footer

<script>
  (function() {
    document.addEventListener('DOMContentLoaded', () => {
      document.querySelector('#productWrapper #productNav a').innerHTML = `
        <span class="back-arrow">←</span> BACK
      `;
    })
  })()
</script>

Let me know how it works on your site

That worked great, thank you! 😉 Is there a way to also remove the "Back to Top" at the bottom of the page on mobile?