Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Photo grid layout problem


Recommended Posts

The HTML calls for a 250px square image, but the CSS seems to be scaling it to 82.5px square. There is a 20px bottom margin (img-responsive class) which may be counting against the allotted height (probably against the 250px, as it doesn't look like it's taking 20px out of 82.5). Just for fun, maybe try changing the bottom margin to 0 and see if that helps. If the layout is messed up by that, we'll have to try something else. A margin shouldn't affect the image size, but who knows what's going on here.

 

By the way, displaying as if on a smartphone (Firefox shift-ctrl-M), the left sides of images were badly cut off. That may be something else you want to look at.

Link to comment
Share on other sites

Thanks for your suggestion but bottom margin change to 0 hasn't changed anything.

Sorry I am not code literate but it seems that the height of the photogrid is setting to some weird percentage.

(I wanted a larger image in product info so had changed pigal to 350px which caused the chopped image in smartphone - now changed back - thanks for that)

Link to comment
Share on other sites

I just loaded the page again, and the full images are showing (both PC display and smartphone sized). They're no longer cut off at the bottom. If you don't see that, hit Ctrl+F5 to force a full page reload, and see if it works then.

Link to comment
Share on other sites

I had the same issue long time ago and joli1811 did too.

No matter what margin, gutter or css definition you add it always cut the bottom part of the large image.

The solution that Matt suggested was very simple.

 

Open your ext/photoset-grid/jquery.photoset-grid.min.js file. And search for (Ctrl+f) the word overflow.

Once you find it change it from

overflow:"hidden"

to

overflow:"visible"

save and close the file.

Done!

Link to comment
Share on other sites

@@Tsimi, I would consider that at best to be a temporary workaround, rather than a permanent fix. You have content being cut off because it's overflowing its designated space. Rather than simply saying, "go ahead and display the overflow no matter what it's covering up", it would be better in the long run to figure out why your content does not fit in the space you set aside for it, and adjust the layout and/or content until everything fits properly.

 

To each his own, but that's how I would approach it.

Link to comment
Share on other sites

@@MrPhil

 

As to the question "why" this happens I really don't know it beats me. When I had that issue with the thumbnails covering the large image I spend many days changing all kinds of margins, paddings, widths and heights and layouts but nothing could fix it. I used all tools at my disposal and still couldn't get this fixed until I saw Johns and Matts solution with that overflow setting.

The thumbnails defy all logic. For me that overflow did the trick. I'll let the creators take care of this issue since I have spend more time then I should have with this. :D

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...