Flow theme- Product layout

XR
Tourist
8 1 1

Hi hi 

 

We have 5 product listing in our collection and the layout of the product is not aligned. 

Kindly refer to pic. 

However, when i have 4 product listing, the layout of the product is perfectly aligned. 

Can someone advise how we can resolve this? 

Tks! 

Xinru20210422 enquiries.jpg

0 Likes
Pallavi
Shopify Expert
1277 174 210

Hello There,

Please share your store URL and screenshot.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
XR
Tourist
8 1 1
website: https://www.wearspiffy.shop/password
password: 0407spiffy
0 Likes
XR
Tourist
8 1 1
 
password: 0407spiffy
0 Likes
dmwwebartisan
Shopify Partner
5784 1323 1695

@XR 

Please add the following code at the bottom of your assets/theme-index.min.css file.

@media only screen and (max-width: 768px){
.homepage-product-grid-wrapper .grid__item {margin-bottom: auto !important;}
}

Hope this works.
Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Pallavi
Shopify Expert
1277 174 210

Hello There,

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

@media only screen and (max-width: 749px){
.homepage-product-grid-wrapper .grid__item {margin-bottom: auto !important;}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes
XR
Tourist
8 1 1

Hihi

 

Thankful for your quick and apt response. Instantly solved it. 

 

Can I ask for another solution from you? How do I change the discounted price to red color? Currently, it's black color. 

 

Thank you. 

Xinru

0 Likes
Pallavi
Shopify Expert
1277 174 210

Hello There,

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

.product-grid--price s span.money{
color: black!important;
}

span.money {
color: red!important;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
0 Likes