Solved

How to show 4 images in a row on PC but 2 images on mobile.

Minako85
Excursionist
33 0 8

Hi!

I need help with html coding.

My predecessor had been using the following code to show the images on our website.

4 images are shown in a row on PC but on mobile, the images are shown 1 by 1.

I want to change it so that 2 images are shown in a row on mobile.

 

------------------------------------------------------------------------------------------------------------------------

<div data-page-id="collection" class="page-contents">
<div class="contents-box">
<div class="title-pane text-center">
<h1 class="font-alphanumeric">SPRING SUMMER 2023</h1>
</div>
<div class="content-pane">
<ul class="pagination font-alphanumeric">
<li class="page-number"><a class="is-active" href="/pages/collection-spring-summer-2023-woman">WOMAN</a></li>
<li class="page-number"><a class="is-active" href="/pages/collection-spring-summer-2023-man">MAN</a></li>
<li class="page-number"><a href="/pages/colection-spring-summer-2023-women-2">WOMAN 2</a></li>
<li class="page-number"><a href="/pages/collection-spring-summer-2023-women3">WOMAN 3</a></li>
</ul>
<ul id="look-list" class="look-list"><!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-1.jpg?v=1675060638"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-1.jpg?v=1675060638"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/super-loose-flare-denim">SUPER LOOSE FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-2.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-2.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-3.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-3.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-4.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-4.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-5.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-5.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-6.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-6.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-7.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-7.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-8.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-8.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-9.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-9.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-10.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-10.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/knitcall-body-suit">KNITCALL BODY SUIT</a></li>
<li><a href="https://inscrire.jp/products/pw-sta-prest">PW STA-PREST</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-11.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-11.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/knitcall-body-suit">KNITCALL BODY SUIT</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-12.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-12.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/knitcall-body-suit">KNITCALL BODY SUIT</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-13.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-13.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-14.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-14.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-15.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-15.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-16.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-16.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-17.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-17.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-18.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-18.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-19.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-19.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-20.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-20.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-21.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-21.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-22.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-22.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-23.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-23.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
<!-- END --> <!-- START -->
<li><a href="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-24.jpg"><img alt="" src="https://cdn.shopify.com/s/files/1/0404/8807/5431/files/INSCRIRE-SS23-MEN-24.jpg"></a>
<ul class="look-items font-alphanumeric"><!--<li><a href="https://inscrire.jp/products/flower-jacquard-work-jacket">FLOWER JACQUARD WORK JACKET</a></li>
<li><a href="https://inscrire.jp/products/002-flare-denim">002 FLARE DENIM</a></li>--></ul>
</li>
</ul>
</div>
<div role="dialog" aria-modal="true" aria-label="image gallery" class="blueimp-gallery blueimp-gallery-controls" id="blueimp-gallery">
<div aria-live="polite" class="slides"></div>
<h3 class="title font-alphanumeric">SPRING SUMMER 2023</h3>
<ul class="items font-alphanumeric">
<li>XXXXXXXXXXXXX KNIT</li>
<li>XXXXXXXXXXXXX JACKET</li>
<li>XXXXXXXXXXXXX PANTS</li>
</ul>
<div class="pagination font-alphanumeric"><span class="current">1</span> / <span class="total">10</span></div>
<a aria-keyshortcuts="ArrowLeft" aria-label="previous slide" aria-controls="blueimp-gallery" class="prev"><span class="arrow_button button_left"></span></a> <a aria-keyshortcuts="ArrowRight" aria-label="next slide" aria-controls="blueimp-gallery" class="next"><span class="arrow_button button_right"></span></a> <a aria-keyshortcuts="Escape" aria-label="close" aria-controls="blueimp-gallery" class="close font-alphanumeric"><span class="close-text">CLOSE</span><span class="close-icon lines-menu"><span class="wrapper"><span class="line"></span><span class="line"></span></span></span></a></div>
</div>
</div> 

 

------------------------------------------------------------------------------------------------------------------------------------------

 

URL: https://inscrire.jp/pages/collection-spring-summer-2023-man

 

 

 

Any help will be greatly appreciated!

 

 

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

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; 
}
} 

Screenshot 2023-08-17 at 15.02.03.png

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 11 (11)

PageFly-Noah
Astronaut
866 175 194

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>

PageFlyNoah_0-1692259114241.png

 

Hope this can help you solve the issue 

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Minako85
Excursionist
33 0 8

Thank you so much for the help!

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

This is an accepted solution.

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; 
}
} 

Screenshot 2023-08-17 at 15.02.03.png

 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Minako85
Excursionist
33 0 8

Hi! 
Thank you so much for your help!!

Your code has saved me so much time😀

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Happy I could help <3!

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Minako85
Excursionist
33 0 8

Hi Dan

Sorry to bother you again.

Would you please help me again regarding coding?

I want to show less margin on both sides for mobile.

I would really appreciate if you can advise on where and how to edit😣

Dan-From-Ryviu
Shopify Partner
7538 1454 1452

Hi @Minako85 

You can do it by updating code like this 

@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; 
}
body.template-page .PageContainer main>.Container { padding: 0 20px !important; }
} 

- Helpful? Like or Accept solution! - Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Minako85
Excursionist
33 0 8

Hi @Dan-From-Ryviu 

Thank you so so much! 

Moeed
Shopify Partner
3697 932 1166

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:

Moeed_0-1692259846813.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Minako85
Excursionist
33 0 8

Thank you for the support!

Moeed
Shopify Partner
3697 932 1166

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️