How to remove text and button on mobile mode

Solved
Highlighted
Shopify Staff
Shopify Staff
519 27 58
Hi, @user_000 !
 
Apologies for the delay in getting back to you. Yes, I can help you with this. It will involve that bit more customizing - both to a section and also to your CSS. I do suggest, once again to first try this out in a duplicate version of your theme. 
 
If you could access your theme's code once more. The area we will first adjust is the featured-row.liquid section. In here if you could search for the <h2> tag with the class= h3 . It should look something like this:
 
{% if section.settings.title != blank %}
          <h2 class="h3">{{ section.settings.title | escape }}</h2>
        {% endif %}
 
On my test store, this is around line 31. 
 
You will need to cut this from here, and paste it just underneath the following line of code:
 
 <div class="feature-row__item">
 
This is higher up on the page, and should be around line 5.  Then click save
 
From here we can then style this and also fix it on mobile/smaller devices, so that it remains centered on these instead. To do this you will now need to access your CSS.  At the very bottom of this sheet, you can paste:
 
 
.page-width .feature-row .h3{
  padding-top:20px;
  padding-bottom:20px;
  padding-left:20px;
  position:relative;
}
And the following code for smaller screens:
 
   @include at-query($max, $small) {
.feature-row__item h2.h3 {
    text-align: center;
  padding-bottom: 20px;
}
    }
 
This should do the trick for you. Do let me know if you have any questions!
 
Cheers,
Katy

 

Katy | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes