First Button Label Not Responsive on Mobile Using Shopify Turbo Theme

Turbo is a powerful 3rd party theme built with a focus on performance. The new turbo theme is highly configurable, blazing fast and has been optimized for eCommerce. We highly recommend this theme.

You can purchase the theme from here

If you've added the section 'Image with Text Overlay' with a 'First Button Label' i.e. 'Shop Now'.

The button doesn't sit correctly on the image, but positions the button below the image, which in some cases doesn't look so good.

To fix this issue we will need to make some slight changes to the themes code. Please make a backup of the code by copying and pasting into Notepad++ for easy visibility.

Download here to install Notepad++

 

  1. Log in as a store admin
  2. Click and expand Online Store
  3. Click Themes 
  4. Click Actions for a drop down menu then click Edit code
  5. Scroll Down to find 'Sections' (Underneath Templates)
  6. Find and select image-with-text-overlay.liquid
  7. Add the below code above the first line
    1. <style>
      @media only screen and (max-width:550px)
      {
      .action_button
      {
      margin-top:-180px !important;
      width:120px !important;
      background-color: black !important;
      color: white !important;
      border-color:black !important;
      }
      }
      @media only screen and (max-width:550px)
      {
      .mainImage
      {
      height:360px !important;
      }
      }
      </style>
  8. To change the colour of the button edit the below code
    1. background-color: black !important;
      color: white !important;
      border-color:black !important;
  9. You will notice the button is now sitting correctly on the image, but there is a blank white space which needs filling
  10. Scroll down and find styles.scss.liquid under assets
  11. Add this code above the first line
    1. @media only screen and (max-width:550px)
      {
      #shopify-section-1489283737905
      {
      margin-top:-65px !important;
      }

 

If you don't have a Shopify store click here to start and take advantage of their 14 day trial.

Feel free to Contact us here if you need any assistance

    Leave a comment