Re: How to show 4 images in a row on PC but 2 images on mobile.
You can do that by adding this CSS code at the bottom of your theme.scss.liquid file
@media screen and (max-width: 767px){
body.template-page .PageContainer .PageContent .page-contents.collection .look-list>li {
margin: 5px !important;
width: calc(50% - 10px) !important;
}
} 
Hi @Minako85
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the </head> to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the </head>
<style>
@media screen and (max-width: 767px){
ul#look-list {
justify-content: center
}
ul#look-list li {
flex-basis: 45%;
}
}
</style>
Hope this can help you solve the issue
Best regards,
Noah | PageFly
You can do that by adding this CSS code at the bottom of your theme.scss.liquid file
@media screen and (max-width: 767px){
body.template-page .PageContainer .PageContent .page-contents.collection .look-list>li {
margin: 5px !important;
width: calc(50% - 10px) !important;
}
}
Hey @Minako85
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag
<style>
@media screen and (max-width: 767px){
ul#look-list {
justify-content: center
}
ul#look-list li {
flex-basis: 45%;
}
}
</style>RESULT:
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Community Blog Articles
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024