Remove a Specific Part from dekstop but show on mobile

Highlighted
New Member
2 0 1

Hello, this specific code, is good and available on mobile, but i would like to remove it completely from desktop for it to show on mobile only. 

 

this is the code, i have tried to remove it using code but it has not worked, i would love for someone to help me with this issue:

 

 

--></style>
<div class="services">
<div class="cen">
<div class="service"><i class="fa fa-surprise"></i>
<h2>Hair massage</h2>
<p>The gentle heated hair massage gives a <span>smooth, silky, natural lustrous look by sealing the hair cuticles, thus reducing split ends and knotting</span></p>
</div>
<div class="service"><i class="fas fa-shower"></i>
<h2>HAIR Rejuvenation</h2>
<p>It also rejuvenates dry or damaged hair, with its <span class="a-text-bold">Tourmaline ceramic base</span> &amp; makes your hair<span> result in </span><span class="a-text-bold">smooth</span><span>, </span><span class="a-text-bold">shiny hair</span><span>.</span><br></p>
</div>
<div class="service"><i class="fa fa-gem"></i>
<h2>High Quality</h2>
<p>This simulates a feeling of getting a light massage to the hair, The adjustable handle stretches the hair more effective than other kinds of hair massagers.</p>
</div>
<div class="service"><i class="fas fa-adjust"></i>
<h2>hair Cleansing</h2>
<p>Effectively sucks out impurities and dust particles from Hair. It removes grease &amp; dry hair instantly, resulting in absolutely glowing Hair!</p>
</div>
</div>
</div>

 

mobile.PNGdesktop.PNG

0 Likes
Highlighted
Shopify Partner
2214 481 625

Hey @JohnCambell644,

Please add the following code at the end of your assets/theme.scss.liquid ( timber.scss.liquid/style.scss.liquid. Which is working on your theme) file.

@media screen and (min-width: 720px) {
.services{ display:none; }
}

 

Hope this works! 

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes
Highlighted
New Member
2 0 1

hello! that fixed my problem thank you!! unfortunately, while doing that i believe is misplaced another small bit of code. If possible can you tell me the fix of this problem?  

Before:

problem.PNG

 

After:

 

problem 2.PNG

 

This is the code:

<div style="display: inline-flex; overflow: hidden; width: 100%; margin-top: 4%;"><img style="float: left; display: inline; height: 52px; margin-right: 20px;" src="https://cdn.shopify.com/s/files/1/0285/8293/6707/files/cart_1_1.png?v=1585517890">
<div style="float: right; display: inline-block; margin-top: 1%;"><strong></strong></div>
<div style="float: right; display: inline-block; margin-top: 1%;"><strong>Other people want this.</strong> Over 20 people have this in their carts right now.</div>
</div>

 

Thank you for your help! i am going to follow you on Instagram. 

1 Like
Highlighted
Shopify Partner
2214 481 625

Hey @JohnCambell644,

Thanks for following me up

I checked your code but I think to solve your problem. I need your website URL.

If it is possible for you.

Thanks!

If helpful then please Like and Accept Solution.
Do you need custom changes on store ? Hire me.
Feel free to Contact me on dmw.webartisan@gmail.com
Follow us on Instagram @dmw.webartisan
0 Likes