Reduce space between each product and make each image bigger.

Solved
Highlighted
Excursionist
22 0 2

Hi,

I'd like to show each product slightly bigger when mobile.

I tried by adding this on bottom of theme.scss.liquid but it doesn't work.

@include media-query($small) {
  .small--one-half {    width:100%;
  }
}

And tried by adding margin : 0; and padding : 0; on .product__image row to make them 0, but it also doesn't work.

I would appreciate if anyone could help on it.

Thank you.

Website:https://delivery.samurice.asia

IMG_7192.jpg

0 Likes
Highlighted

Hello @Hana29 

Add this css at the bottom of

Online Store->Theme->Edit code->Assets->theme.scss.liquid

#shopify-section-featured-products .product.grid__item.medium-up--one-third {
	margin-bottom: 10px;
}

Hope this will work for you

Thanks....

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
1 Like
Highlighted
Astronaut
1085 177 213

@Hana29 Glad to hear from you again! Here is some code I developed to help you:


1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

 

 

 

@media (max-width: 767px){
    #shopify-section-featured-products .grid {
    margin-left: 0 !important;
}

    #shopify-section-featured-products .grid__item {
    padding: 5px !important;
}
}
#shopify-section-featured-products .grid__item {
	margin-bottom: 10px;
}

 

 


With this code you will be able to both make the images bigger AND add the bottom spacing. Let me know whether it works!
 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Excursionist
22 0 2

Thank you @oscprofessional for your help.

Your advice helped to reduce the space between items vertical!

0 Likes
Highlighted
Excursionist
22 0 2

Thank you @diego_ezfy for your help.

This is what I wanted to do!!

But the code is affect to only 1st section of featured collection. 

Is there any way to make change to other section too?

Thank you.

IMG_7511.jpg

0 Likes
Highlighted
Astronaut
1085 177 213

This is an accepted solution.

@Hana29 

Yes, just replace the previous code with this:

@media (max-width: 767px){
    [id] .featured-products .grid {
    margin-left: 0 !important;
}

    [id] .featured-products .grid__item {
    padding: 5px !important;
}
}
[id] .featured-products .grid__item {
	margin-bottom: 10px !important;
}
◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like
Highlighted
Excursionist
22 0 2

Thank you @diego_ezfy for your prompt help!

It's amazing!! Everything works perfectly.

Thank you a million!

0 Likes
Highlighted
Astronaut
1085 177 213

You're welcome @Hana29 , I'm glad to hear that!

Next time feel free to contact me personally, I'll be happy to help.

Kind regards,
Diego

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
1 Like