How to modify this code for mobile?

[tesstesting]

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!

[oscprofessional]

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 

[tesstesting]

@oscprofessional 

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.

[oscprofessional · Accepted solution]

@tesstesting,

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%;
}
}

[tesstesting]

@oscprofessional

---

@oscprofessional wrote:

@tesstesting,

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>