0

I have a premium theme called "Labomba" and been playing around with it for quite some time as I'm building it for someone and now I'm reaching the end which I just need to sort out this issue.

The majority of this page with the issue is standardised WooCommerce as you'll probably work out.

The thumbnails on the main image float to the right on this layout but I'm aiming to have them go underneath but I'll tried various CSS elements here and there in the main div they situate in. I managed to get them underneath, but as you'll see, it's just a mess and I've seen using inline-block may help but I've tried this as well to some extent.

I've also tried playing around with the resolution of the image to see if this can sort the issue a little more but proving not to be the case.

Overall the main image is perfectly fine, it's just the thumbnails that are ruined both desktop and mobile.

I've even resorted to looking into a handful of plugins which some override the main image & thumbnails but although it may override the layout and thumbnail, it just looks completely different unfortunately. I'm just looking for a fresh out the box main image and thumbnail from woocommerce, whilst keeping this theme.

Wireframe of theme layout for this page: http://postimg.org/image/ec6k0zcgb/

Link of an example product to look at: http://94.23.211.70/~cewp/product/concrete-drawing-sonnet-for-silence/

Any more information you need from me, let me know. I'll assume you'll rely on inspect element for a quick test, if you need to know files in a certain directory, also let me know.

Thanks for taking the time to try and suss this out for me.

0

The problem is with the containing div. In /wp-content/themes/curiousegg/css/woocommerce.css on line 677 the width of div.thumbnails is set to 18% you would have to increase this to something more. Change .thumbnails width to 100%, then change the width of .thumbnails a to whatever width you want the images to be. I tried 20% and it looked ok.

screenshot of shop

  • Fantastic input in your reply, I'll tweak away now. – Dev Dec 5 '15 at 16:01
  • Ok, I've changed from 18% to 40% and I've added another image as you requested. Same URL: 94.23.211.70/~cewp/product/concrete-drawing-sonnet-for-silence – Dev Dec 5 '15 at 16:06
  • ok, which thumbnails are we working with? is it the one that I pointed to in my image or the related products? – yobddigi Dec 5 '15 at 16:13
  • change .thumbnails width to 100%, then change the width of .thumbnails a to whatever width you want the images to be. I tried 20% and it looked ok. – yobddigi Dec 5 '15 at 16:19
  • The one you are pointing to is in fact one of 3 thumbnails. The div class to manipulate all of this is .thumbnails.columns-5 – Dev Dec 5 '15 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.