The product captions are not showing up properly in the mystile woocommerce theme. Some of them are overlapping each other.

Question

It is eCommerce website which is driven by Wordpress. Everything else is fine but the problem that I am getting; can be seen at the following pages:

http://www.glitterbits.co.uk/shop-2/

and

http://www.glitterbits.co.uk/product-category/glasses/

The image captions are all mixed up. They look alright on big screens but they lose the structure when seen on small laptop screens, ipad, iPhone and andriod device screens. It seems to be happening on all of the pages.

Mystile theme was designed by keeping into account all of the screen sizes as I read on their website but I can not figure out how to fix this issue. It seems to be happening on all of the pages.

Any help will be appreciated.

Thanks in advance.

Answer 1

It's a CSS change you've implemented in your mystile-child theme. You've defined an overall pixel width for h3 headings which doesn't stay within the boundaries of the thumbnail divs as the responsive theme flexs depending on screen resolution.

Delete your h3 heading width CSS

body.page-id-19 h3 {
    width: 210px;
}

And for some reason you've changed line-height to 0 somewhere but I can't be bothered finding where/why so paste this in too

body.page-id-19 h3 {
    line-height: 0.8em;
}

Somewhere else you've put this to move a header to the left. Delete it.

li.product-category.product.last > a > h3 {
    margin-left: -20px;
    width: 224px;
}