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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024