Shopify themes, liquid, logos, and UX
Hi!
I am using the Craft theme. There is no problem if the number of products is 4 or more on the collection pages. However, the dimensions of the product field change depending on whether it is 3.2 or 1. When I look at the base.css file, I see that settings such as grid--4-col , grid--3-col , grid--2-col have been made. When making changes to these, the slide show and multi-column areas on the main page are broken. I'm waiting for your help.
Solved! Go to the solution
This is an accepted solution.
Hi @Okyns ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:
@screen (min-width: 990px) {
#ProductGridContainer #product-grid .grid__item {
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
This is an accepted solution.
Thank you so much .
I changed it with a little touch as follows.
@media screen and (min-width: 990px) {
#ProductGridContainer #product-grid .grid__item {
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
}
}
I'm marking it as a solution.
Hi @Okyns ,
Can you clearly note the part you want so we can help you? Do you mean that on the collection page, the grid card will show 4 columns in 1 row?
Thanks
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
Hi
If there are 4 products in a category, it shows 4 products in a row and everything is fine. But if the number of products is 3 or 2, the image sizes change. I want the image sizes to not change even if the number of products is less than four.
What I want to see are 4 products in 1 line and as below.
I'm waiting for your help
Hi @Okyns ,
sorry for the slow response
Please share your store URL and if your store is password protected then please provide password too.
So that we can help you.
Thank you.
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
This is an accepted solution.
Hi @Okyns ,
You can follow the instruction below:
1. Go to Online Store->Theme->Edit code
2. Asset->/base.css->paste below code at the bottom of the file:
@screen (min-width: 990px) {
#ProductGridContainer #product-grid .grid__item {
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
}
}
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
AVADA - Top Rated App for Email, SMS, Popups
Check our website for full features and start a FREE TRIAL.
Install another app to boost sales, 100% FREE
This is an accepted solution.
Thank you so much .
I changed it with a little touch as follows.
@media screen and (min-width: 990px) {
#ProductGridContainer #product-grid .grid__item {
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4) !important;
}
}
I'm marking it as a solution.
User | RANK |
---|---|
76 | |
65 | |
64 | |
53 | |
49 |
We're excited to announce improvements to the threaded messaging experience in our communi...
By TyW May 31, 2023Thank you to everyone who participated in our AMA with Klaviyo. It was great to see so man...
By Jacqui May 30, 2023Photo by Marco Verch Sales channels on Shopify are various platforms where you can sell...
By Ollie May 25, 2023