Product pictures (tumbnails) with the wrong size

  • Posts: 4
  • Thank you received: 2
5 years 4 months ago #312449

-- HikaShop version -- : 4.2.2
-- Joomla version -- : 3.9.8
-- Browser(s) name and version -- : Firefox 69

Hi together,
I'm just beginning with my fist steps in HikaShop.

I created a product and uploaded 3 pictures with a size of 800x600 px. The main pictures is displayed correct but the smaller versions look very flat (see screenshot1). I guess these are not the thumbnails because I switched thumbnails off. If I switch them on, I only get an empty space on the left of the main picture (see screenshot2). So how can I get these small pics (or thumbs) in a correct size/ratio?

You can see my configuration in screenshot3.

My second question is the price in the upper right of the screenshot1. How can I make this a litte larger? It's very small. An how can I prevent that the weight (Gewicht) is displayed right after the price? I would be better, if there were one or two breaks after the price so that the weight is displayed in a separate line.

Hope, you can help me.
Oliver

Attachments:

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

  • Posts: 83410
  • Thank you received: 13503
  • MODERATOR
5 years 4 months ago #312461

Hi,

1. This is because of the CSS of your template.
It must force the width of the thumbnails to 100% of the space available.
So it will require some CSS code to be added to be able to counter that.
What CSS code to use precisely will depend on what CSS is there.
Ideally we would need a link to the page to check things out in order to provide a precise answer.

2. Similarily, you can do that with CSS code.
We have some documentation here explaining how to find the different classes and ids you can use in your own CSS code to style the different elements of your shop:
www.hikashop.com/support/documentation/1...ize-the-display.html
So if you follow the instructions there, you'll find with your browser inspector tool that the class around the price area is: hikashop_product_price_main.
So you can then add such CSS:
.hikashop_product_price_main{ font-size: 20px; }

3. Similarily, if you check the HTML for the weight, you'll find this class: hikashop_product_weight_main
So you can use such CSS:
.hikashop_product_weight_main{ display:block; }

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

  • Posts: 4
  • Thank you received: 2
5 years 4 months ago #312468

Perfect! I added the code to my custom.css and now it works.

Thank you very much!
Oliver

Last edit: 5 years 4 months ago by oskar-lima.
The following user(s) said Thank You: Philip

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

Time to create page: 0.058 seconds
Powered by Kunena Forum