Solved

Can You Display Arrows On Mobile-Only In Shopify Collections?

MT27
Pathfinder
145 6 10

Hi can you please help me display the arrows on mobile version only under the section T-shirts. I think I used CSS code to hide by accident. 

page:https://matibrnd.com/products/alexander-the-great-ar-hoodie

code: biangu

Thank you

 

MT27_0-1711036988058.png

 

Accepted Solution (1)

Made4uo-Ribe
Shopify Partner
5435 1308 1609

This is an accepted solution.

Hi @MT27 

Yes, you have a prev. and next button but you hide it well in the theme.liquid. It over ride already and it would be hard to add another code it would not listen.

What you can do is to find this code in the theme.liquid, component-slider.css or wherever youi paste it before. 

This is the code.

Made4uoRibe_0-1711041969441.png

And it must be change like this. 

 

@media screen and (max-width: 749px) {
.slider-button--next {
    display: content !important;
}

 .slider-button--prev {
    display: content !important;
}

.slider-buttons {
  position: unset !important;
}
}

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com


View solution in original post

Reply 1 (1)

Made4uo-Ribe
Shopify Partner
5435 1308 1609

This is an accepted solution.

Hi @MT27 

Yes, you have a prev. and next button but you hide it well in the theme.liquid. It over ride already and it would be hard to add another code it would not listen.

What you can do is to find this code in the theme.liquid, component-slider.css or wherever youi paste it before. 

This is the code.

Made4uoRibe_0-1711041969441.png

And it must be change like this. 

 

@media screen and (max-width: 749px) {
.slider-button--next {
    display: content !important;
}

 .slider-button--prev {
    display: content !important;
}

.slider-buttons {
  position: unset !important;
}
}

 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
Need a knowledgeable developer? Come and visit us at

Made4uo.com