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.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024