Product Grid displays improperly on certain resolutions

Technical Q&A
1

Hi! I fear I may have borked some code while futzing with style - see image. I’m sure it’s something pretty simple, but I can’t seem to figure it out. :disappointed_face: Very intermittent - only happens at certain resolutions on mobile, and sometimes when scaling on desktop.

Thanks for any help!

Ryan

Pliers & String by Marina.jpeg
Pliers & String by Marina.jpeg1170×2532 271 KB

2

Hi @pliersandstring ,

I do not see the problem in the collection. Can you open this in the incognito browser and see if the problem persist?

3

Hi @pliersandstring

I’m Richard Nguyen - CRO Expert at PageFly- Free Landing Page Builder.

You can try with this code.

Follow this:

Go to Online Store->Theme->Edit code->Theme.css->”style” tag->paste below code in bottom of file

@media only screen and (max-width: 768px)

.small–grid–flush>.grid__item {

padding-left: unset !important;

}

@media only screen and (max-width: 768px)

.page-width .small–grid–flush {

margin: 0 !important;

}

It will look like this: https://prnt.sc/eqUv-C0mZT_j

If you feel my answer is helpful, like it or mark it as a solution. Let me know if you have any questions.

Best regards,

Richard | PageFly

4

Hey there, I am unable to replicate what you are seeing there too, even when resizing dynamically there is no point that it breaks the grid. I created a screen recording (attached to this reply) so you can see but I think you’re all good :raising_hands:

5

Thanks so much Richard! Unfortunately the code doesn’t appear to have worked :disappointed_face:

Ryan