How to Center the Category Image

-- url of the page with the problem -- : fantasticplastic3d.com/index.php/shop
-- HikaShop version -- : 4.7.0
-- Joomla version -- : 4.1.3
-- PHP version -- : 8.1.13
-- Browser(s) name and version -- : Chrome

I've tried everything I can think of to center the image for the category above the text. Nothing seems to work. Do you have any thoughts on how I can get it?

Hi,

You've configured the menu item to have 3 columns of categories. With your template, it means that each element has a width of 400px available. The text is centered on that width.
The thumbnails width for the categories is configured to be 300*300px. So a width of 300px.
The best would be to either increase the number of columns or increase the size of the thumbnails for the categories in your menu item via the Joomla menu manager.

You could also center the image or make it stretch with CSS code, but it feels less clean and more complex than what I suggest above.

I know its been a few months since I posted this issue. I still can not get the category images to appear centered on all devices. What would be the CSS to get this to happen?

Thanks in advance

Hello,

You have to target your relative category image, and define an auto margin (right & left), follow this scheme :
Regards

I'm sorry for being so dense. But you give me a specific example of what the css would be for say the Cleanser category image at artistrynewport.com/shop

thanks

Hello,

Sorry for this return but we aren't sure to understand what you mean with your last message.
Regards

Sorry,
I've tried everything I can think of for ".your_categories_listing" in the solution you stated above and nothing I try works.

Hello,

Because you have to build your own selector css ( documentation ), and to get your required html class, you have to use your browser inspector tool.
1. Point your element => Right-click
2. Select Inspect (or inspector tool)
3. A new window will be open, allowing you to see your element class AND his container class


=> Where you will be able to see :
.your_categories_listing .image_container img

Hope this will be more clear
Regards