Shopify themes, liquid, logos, and UX
Hello
please can someone help with making the below collection images fit the box instead of having the extra space to the right of the image. So ideally the box should be square
the website url is https://now-lashes.myshopify.com/collections password is Thoffo
Solved! Go to the solution
This is an accepted solution.
Hello @Emurph35
@media only screen and (max-width:480px) {
.collection-grid-item__overlay {
position: relative;
width: 100%;
height: 100%;
display: block;
background-position: center;
background-size: cover;
}
.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
height: 100%;
margin-bottom: 100px;
}
.collection-grid-item__link {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
}
Add that code in the CSS file , Hope it will work.
This is an accepted solution.
Hello @Emurph35
@media only screen and (max-width:480px) {
.collection-grid-item__overlay {
position: relative;
width: 100%;
height: 100%;
display: block;
background-position: center;
background-size: cover;
}
.collection-grid-item {
position: relative;
width: 100%;
padding-bottom: 100%;
height: 100%;
margin-bottom: 100px;
}
.collection-grid-item__link {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
}
Add that code in the CSS file , Hope it will work.
Amazing! Thank you so much
@Emurph35You are welcome, If you need to make custom changes in theme you can contact me on below details.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025