Debut Theme Collection page has empty spaces on some rows

Solved
Highlighted
New Member
11 0 0

Hi,

 

Im using Debut theme and noticed that if i view a collection, some rows are missing images.  Well, i dont think the image is missing, but where the image for the product is supposed to go nothing is there.  no products being placed here.JPGwhy is there this blank space?

Ive no idea why and no idea how to fix it. any help would be appreciated.

 

thankyou

0 Likes
Shopify Expert
674 167 195

Hi, @jimidix76 ,

This is Evita from On The Map.

 

There's something wrong with paddings or margins, you will need to add CSS code to fix this, can you add your store URL?

 

Best,
Evita

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
New Member
11 0 0
Shopify Expert
2123 354 445

Hi @jimidix76 

Its becaseu of you have to set clear after 4th product grid:

Add this css in Asset->theme.scss file:

#Collection .grid--uniform .medium-up--one-quarter:nth-child(4n+1){    clear: both;  }

Note: this css base on debut theme so if cant work share your url. 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
11 0 0

thankyou for the suggestion - its been working fine since i started the store (3 months ago) but for some reason this just started.  Seems weird that given that i havent changed any code, I have to add some code to correct it.  What has changed to do this?

0 Likes
Shopify Expert
2123 354 445

Add this in Asset->theme.scss file at bottom:

#Collection .grid > :nth-child(10){clear: both; }

Thats because of you have added bold app and app made his script between your grid.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
11 0 0

thanks again.  I can find the file i need to edit but no idea where this new code is to go. I tried to search the code for #Collection and found nothing.  Bit of a rookie here.  can you please point me to the location in the Asset => theme.css i need to go? is there a line number?

0 Likes
Shopify Expert
674 167 195

1. Go to Online Store->Theme->Edit code

2. Find folder Asset.

3. Click on file theme.scss and scroll down to the bottom of the code.

4. Paste the code at the bottom

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
0 Likes
Shopify Expert
2123 354 445

Yes just follow as OTM send instruction and i also sent same and paste my given code at end of page.

#Collection .grid > :nth-child(10){clear: both; }

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
11 0 0

HI,

so i pasted the code at the bottom of page and saved.  Doesnt seem to have had any effect :(

0 Likes