Collection page (subset) not displaying right

Highlighted
Trailblazer
193 1 31

Hi,

I created a collection page using a subset of my collections using this tutorial. For some reason, the collection images are displaying stacked on top of each other. And for some reason, it seems to be against the rules for Shopify to help troubleshoot any issue regarding this tutorial, which imho should just be a basic Shopify function, but whatever!

 

The collection displayed fine when first created and then the next time I viewed it, the collection items were stacked.

 

Screen Shot 2020-02-14 at 9.42.04 AM.png

 

When viewing from chrome inspect tool they display normally.

 

Screen Shot 2020-02-14 at 9.42.21 AM.png

I'm using Minimal and this collection can only be accessed with a tagged account (not using an app and the main collection displays fine.) I could provide a temp guest account or code. 

 

Any help or suggestions about where to look would be much appreciated!

0 Likes
Highlighted
Shopify Expert
2669 445 577

Hi @Smeelah 

Send your store url and account details i will check.

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
Highlighted
Trailblazer
193 1 31

Just messaged the info. Thanks!

0 Likes
Highlighted
Shopify Expert
2669 445 577

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

.product-grid-item.large--one-quarter.large-up--one-quarter { width: 25%; }
.product-grid-item.large--one-quarter.large-up--one-quarter:nth-child(4n+1) { clear: both; }

For mobile:

.product-grid-item.large--one-quarter.large-up--one-quarter { width: 50%; }

 

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
1 Like
Highlighted
Trailblazer
193 1 31

For desktop, it looks great but it's jumbled up on responsive / mobile but perhaps I'm not adding it the right way? 

 

I tried these but they didn't seem to help:

 

@media only screen and (max-width: 1025px){
.product-grid-item.large--one-quarter.large-up--one-quarter { width: 50%; }
}

and 

@media only screen and (max-width: 769px){
.product-grid-item.large--one-quarter.large-up--one-quarter { width: 50%; }
}

0 Likes
Highlighted
Shopify Expert
2669 445 577

Try to add !important in case if not apply css.

I gave you for desktop and mobile 

 

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
Highlighted
Trailblazer
193 1 31

I added the mobile but I am only guessing at the right format or where to put the !important code;)

 

this one had no effect:

 

@media only screen and (max-width: 1025px){
.product-grid-item.large--one-quarter.large-up--one-quarter { width: 50% !important; }
}

 

this broke my layout:

 

@media only screen and (max-width: 1025px){
.product-grid-item.large--one-quarter.large-up--one-quarter { width: 50% ; !important}
}

 

0 Likes
Highlighted
Trailblazer
193 1 31

@Jasoliya This is what it now looks like on a smaller screen:

 

Screen Shot 2020-02-16 at 11.02.10 AM.png

0 Likes
Highlighted
Shopify Expert
2669 445 577

Send me your store url again. 

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
Highlighted
Trailblazer
193 1 31

Thank you, just sent!

0 Likes