Happening now | Office Hours: Customizing Your Theme With Moeed | Ask your questions now!

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

Solved

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

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

Accepted Solution (1)

solverStaff
Shopify Partner
414 41 71

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.

 Shopify Expert | Theme Developer | Quick Fixes


 Need Shopify help? Let’s chat! WhatsApp


 Portfolio: SolverStaff - Shopify Expert

View solution in original post

Replies 3 (3)

solverStaff
Shopify Partner
414 41 71

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.

 Shopify Expert | Theme Developer | Quick Fixes


 Need Shopify help? Let’s chat! WhatsApp


 Portfolio: SolverStaff - Shopify Expert

Emurph35
Excursionist
36 0 13

Amazing! Thank you so much 

solverStaff
Shopify Partner
414 41 71

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

 Shopify Expert | Theme Developer | Quick Fixes


 Need Shopify help? Let’s chat! WhatsApp


 Portfolio: SolverStaff - Shopify Expert