How to modify this code for mobile?

Solved
Explorer
96 0 4

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Explorer
96 0 4

@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

This is an 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%;
}
}
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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
Explorer
96 0 4

@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

@tesstesting,

On which page do you want to use this code

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
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes