manbru
September 26, 2024, 7:00am
1
Hey,
I’ve created “You may also like” section and you can scroll through it, but it looks like it’s only two products showing and I want the second product to only be shown like 70% of.
my productpage: https://r1vex.myshopify.com/products/akpase-rondane-frost-forest-green
Here’s mine:
Here’s what I would want, so that the second product is not fully being shown so you know you can scroll:
@manbru ,
Step 1: Go to Admin → Online store → Theme > Edit code
Step 2: Search for the file theme.liquid
Step 3: Add this code before tag
Hi @manbru
Please add this code to theme.liquid file, after in Online Store > Themes > Edit code
Hello @manbru
You can add code by following these steps
Go to Online Store → Theme → Edit code.
Open your theme.liquid file
Paste the below code before on theme.liquid
@media screen and (max-width: 749px) {
.related-products .grid--2-col-tablet-down .grid__item {
width: calc(60% - var(--grid-mobile-horizontal-spacing) / 2) !important;
}
.related-products .grid {
column-gap: 10px !important;
}
}
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hello @manbru
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> template-collection.css
add this code at the end of the file.
@media screen and (max-width: 989px) {
.collection .slider--tablet.product-grid {
scroll-padding-left: 1.5rem;
width: 110% !important;
}
}
result
If this was helpful, hit the like button and accept the solution.
Thanks