I have a snippet "Some-snippet" that contains this code:
<span style="float: left;width: 49%;text-align: right;"><strong>
How do I modify it so that it looks like this only on mobile:
<span style="float: left;width: 48%;text-align: right;"><strong>
If it matters, I'm using Debut, and {% include 'some-snippet' %} will be on the collection template and product-card-list.
Thanks!
Solved! Go to the solution
Hello tesstesting,
Add some class for span and display this class for mobile view only.
Or hide that class for desktop view.
Or you can use media query also
Please check this tutorial once click here
Thanks for helping me with this, can you explain how I would go about option 1 you mentioned:
@oscprofessional wrote:Hello tesstesting,
Add some class for span and display this class for mobile view only.
Or hide that class for desktop view.
This is an accepted solution.
Add class to span tag
<span class="test"><span>
Then for desktop add below css
.test { float: left;width: 49%;text-align: right; }
And for mobile add below css
@media(max-width: 767px){ .test { width: 48%; } }
@oscprofessional
@oscprofessional wrote:Add class to span tag
<span class="test"><span>Then for desktop add below css
.test { float: left;width: 49%;text-align: right; }And for mobile add below css
@media(max-width: 767px){ .test { width: 48%; } }
@oscprofessional This worked perfectly, thanks so much!
For others new to liquid...I put this code in my theme.scss.liquid file:
.test { float: left;width: 49%;text-align: right; } @media(max-width: 767px){ .test { width: 48%; } }
Then whenever I need to use this code I use this:
<span class="test"><span>Hello</span></span>
On which page do you want to use this code
User | Count |
---|---|
26 | |
20 | |
11 | |
10 | |
10 |