How to modify this code for mobile?

Solved
Highlighted
Excursionist
35 0 1

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!

0 Likes

Hello ,

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 

 

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Excursionist
35 0 1

@oscprofessional 

 

Thanks for helping me with this, can you explain how I would go about option 1 you mentioned:

 


@oscprofessional wrote:

Hello ,

Add some class for span and display this class for mobile view only.

Or hide that class for desktop view.

 

 

0 Likes

Success.

@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%;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Excursionist
35 0 1

@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>

 

0 Likes