Where do I adjust the height of the products on the category page?

  • Posts: 25
  • Thank you received: 1
3 years 8 months ago #333628

-- url of the page with the problem -- : framemaker.dk/en/shop
-- HikaShop version -- : 4.4.3
-- Joomla version -- : 3.9.27
-- Browser(s) name and version -- : Firefox & Edge

Hi
I would like to adjust the height of the products on the category page.
I can see that you have answered a similar question elsewhere in this forum, but I can't figure it out. I am afraid I need to have a very precise explanation.
Can you please help me?
Best regards
Bjørn

Attachments:

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

  • Posts: 83403
  • Thank you received: 13497
  • MODERATOR
3 years 8 months ago #333632

Hi,

There is no setting to set the height of the product box. That's because that height is not forced.
It's just the sum of the height of the image area plus the height of the text and buttons below.
So if you want to adjust it you can either:
- increase / reduce the height of the thumbnails in the settings of your menu item
- add / remove text / buttons based on the settings of the menu item
- add CSS code to force the height of the product box regardless of the height of the elements inside it.

Now, I can see a lot of white space between the image and the text in each product box on that page. Maybe you're asking how to reduce that white space ? That white space was actually created by two things you did:
- you've configured the thumbnails of your menu item to be 300*400 px.
- However, since you're template has a small width and a sidebar, the products listing only has space for images with a width of 300px. So the thumbnails were going over their product page. To avoid that, you've added that custom CSS:
.thumbnail div.hikashop_product_image_subdiv {
width: 100% !important;
}
in the file framemaker.dk/media/com_hikashop/css/style_custom.css to force the thumbnails to fit to the width of the product box. This in turns reduced the height of the image to a bit more than 200px. However, on the div with the class hikashop_product_image, there is still a height of 300px applied based on the settings of your menu item.
So to avoid that, you could simply reduce a bit the size of the thumbnails in the settings of your menu item, and / or add more custom CSS:
.thumbnail div.hikashop_product_image {
height: auto !important;
}
to your framemaker.dk/media/com_hikashop/css/style_custom.css file.

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

Time to create page: 0.056 seconds
Powered by Kunena Forum