Black bars on edges of Featured Category Images when zooming in/out on webpage

I have an issue with the Featured Category Images were, when checking the responsiveness of the website (i.e. zooming in/ out with browser controls) large black bars appear either side (see attached image) At 100% zoom, the images appear as they should without black bars, however, any other zoom, the bars appear. This obviously ruins the look of the site.

I used the Regenerate thumbnails plugin to try and solve this issue but did not work.

Can you provide a solution please?

Attachments:

You must be logged in to view attached files.

Hello,

I have checked your categories they do not have images now. Make sure you are uploading big images enough for zoom. Finally, check the issue with deactivated plugins related to product categories

Your home page has the row with Featured Catagories element but none categories have been shown http://prntscr.com/jz197f you have configured the element incorrectly.

I have added one more Category element for testing it works https://gyazo.com/72e67762e87abb559ded410b338cadf8

As you can see no black bars on hover.

Best Regards

There is one featured product category image there now. Sorry about that.

the image is 1000 x 1000 px. What size does it need to be?
Can I turn off the hover zoom function, it is not needed. I just want the image to resize responsively.

I have no plugins linked to the featured categories section, it it purely done through the Basel theme

Hello,

Try to change the Categories Design: http://prntscr.com/jz2uvw

Best Regards

Thanks, I changed category design to default and is fixed now thanks

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts