Why are div boxes overlapping on my Shopify product grids?

Not applicable

Hey guys,

I'm trying to make my product grids wider so the text can be made easier but the div boxes just seem to overlap. View www.directcomputers.co.uk on the homepage to understand please.

See here - 

joshsadler98_0-1636676123465.png

Thank you!

 

Replies 3 (3)

PaulNewton
Shopify Partner
6274 573 1319

If this is only happening when you have devtools open ignore it.

Look only for when this is happening in on first load without a resized window.

And try this on a high end machine, when resizing the issue appears then disappears and it's more apparent on low end hardware.

So that may point to a performance issue on your end or in the theme itself and the way it's setup or modified.

Try reducing the number of slideshows on a page.

 

If you've modified your theme, or have apps that do then you would want to remove them 1 by 1 to find what is interfering.

 

Install a fresh copy of the theme and setup that section again and see if the issue exists in the base theme.

If so contact the Empire theme developers for support.

 

An alternative is to identify the library used for the slideshow and call whatever functions is has to recalculate the widths.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Not applicable

Sorry the reason why the above is happening is due to me increasing the width of the boxes in dev settings as that's ultimately what i'm looking to do. So i imagine there is some css for the featured collection items that would need to change to stop it overlapping.

If you understand?

PaulNewton
Shopify Partner
6274 573 1319

Not quite, the slideshow library should be handling the width calculations from whatever the base is.

But it wont always update just because your fiddling around in devtools it doesn't know things have changed.

What should happen is if you change the base width then resize the window it should recalc.

If so you should just be able to adjust the width and the let the slideshow deal with it.

Mileage will vary though and it gets advanced after that.

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org