How to Center the Category Image

  • Posts: 268
  • Thank you received: 7
  • Hikamarket Frontedition Hikamarket Multivendor Hikaserial Standard Hikashop Business
1 year 11 months ago #347955

-- 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?

Please Log in or Create an account to join the conversation.

  • Posts: 83007
  • Thank you received: 13400
  • MODERATOR
1 year 11 months ago #347957

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.

Please Log in or Create an account to join the conversation.

  • Posts: 268
  • Thank you received: 7
  • Hikamarket Frontedition Hikamarket Multivendor Hikaserial Standard Hikashop Business
1 year 3 months ago #355136

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

Please Log in or Create an account to join the conversation.

  • Posts: 4760
  • Thank you received: 647
  • MODERATOR
1 year 3 months ago #355139

Hello,

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

.your_categories_listing .image_container img {
    margin-right: auto;
    margin-left: auto;
    border: 1px solid black;
}

Regards

Last edit: 1 year 3 months ago by Philip.

Please Log in or Create an account to join the conversation.

  • Posts: 268
  • Thank you received: 7
  • Hikamarket Frontedition Hikamarket Multivendor Hikaserial Standard Hikashop Business
1 year 3 months ago #355152

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

Please Log in or Create an account to join the conversation.

  • Posts: 4760
  • Thank you received: 647
  • MODERATOR
1 year 3 months ago #355156

Hello,

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

Please Log in or Create an account to join the conversation.

  • Posts: 268
  • Thank you received: 7
  • Hikamarket Frontedition Hikamarket Multivendor Hikaserial Standard Hikashop Business
1 year 3 months ago #355187

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

Please Log in or Create an account to join the conversation.

  • Posts: 4760
  • Thank you received: 647
  • MODERATOR
1 year 3 months ago #355190

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

alt


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

Hope this will be more clear
Regards

Last edit: 1 year 3 months ago by Philip.

Please Log in or Create an account to join the conversation.

Time to create page: 0.068 seconds
Powered by Kunena Forum