hi there, i want to make this section on mobile only into 3 columns instead of 2. fabric theme
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (max-width: 767px) {
slideshow-slide.resource-list__slide {
width: 31% !important;
}
}
</style>
RESULT:
Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.
Best,
Moeed
Hey @hausofmossandmoon try this one by follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the </body>tag if this code work please do not forget to like and mark it solution
<style>
@media (max-width: 749px) {
.slideshow-slides {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
grid-template-rows: 1fr !important;
overflow: hidden !important;
}
}
</style>
Hi there! me again, is there a way to make is just happen on that one section? the code supplied is affecting all of my collection carousels on mobile rather than just this one section. thank you!
Yeah, instead of adding it in theme files. Just simply add it in the Custom CSS option of that specific section in your theme editor.
Don’t forget to remove the style tags which are <style> and </style>
Best,
Moeed
thank you you’re amazing, really appreciate your help