How can I make the collection grid boxes smaller/fit the image size.

Solved
Emurph35
Excursionist
36 0 13

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 

 

FFA36F6B-A65C-41A8-9ACD-E58DD9ADCEEF.jpeg

0 Likes

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.

If my reply helpful then please Like to let me know!
If my answered is right according to your question, Mark it as an Accepted Solution.
Facing more issues ? Hire me For Quick Chat: Say hello in WhatsApp : 01761469797
0 Likes
Emurph35
Excursionist
36 0 13

Amazing! Thank you so much 

0 Likes

@Emurph35You are welcome, If you need to make custom changes in theme you can contact me on below details.

If my reply helpful then please Like to let me know!
If my answered is right according to your question, Mark it as an Accepted Solution.
Facing more issues ? Hire me For Quick Chat: Say hello in WhatsApp : 01761469797
0 Likes