Main image size bootstrap yootheme template unity

  • Posts: 344
  • Thank you received: 3
10 years 1 month ago #200452

-- HikaShop version -- : 2.4
-- Joomla version -- : 3.4.1

Yootheme template unity (latest version)

This template works fine with hikashop bootstrap activated.

But I have one small problem when viewing the product page on an ipad.
The main image covers parts of the product name, price. (please see atached image).



The problem only occur when I hold the tablet in the narrow view.

Any advice on css for the main image to fix this so that the image get proportionally smaller depending on the size of the screen ?

Attachments:

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

  • Posts: 26253
  • Thank you received: 4040
  • MODERATOR
10 years 1 month ago #200454

Hi,

Your website is "offline" and your issue is related to CSS ; so it will be hard to say.
But there are now good emulation features in the browsers, like "google chrome" allow to simulate the display of a page for a specific device.
When displaying the inspector, you can click on the "device selector" (near "elements", "network", "sources"...) and select the device you want (with the orientation you want).
Then you will be able to see the CSS and analyze what is going on.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 344
  • Thank you received: 3
10 years 1 month ago #200622

Tnx for reply.
Yes I closed my demo site.

Anyway, I solved the problem by adding this code which I found in another post:

.hikashop_product_main_image_subdiv{ width: 100% !important; }

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

  • Posts: 344
  • Thank you received: 3
8 years 4 months ago #260778

Hikashop 3
Joomla 3.6.5

I've added the line....

.hikashop_product_main_image_subdiv{ width: 100% !important; }

into my "Styles for the front-end: custom.css file" in order to stop the price to cover the main image on smaller screens

This works just perfect on all screen size except on my iphone and android phone (narrow view). Then the product image gets way to small. please see image below.



Any advice on what I can add to the code in order make the product image fill out the mobile screen (narrow view?

Attachments:

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

  • Posts: 26253
  • Thank you received: 4040
  • MODERATOR
8 years 4 months ago #260779

Hi,

In the product listing menu, you will find a setting called "Height consistency".
Please deactivate that setting.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

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

  • Posts: 344
  • Thank you received: 3
8 years 4 months ago #260812

Hikashop 3
Joomla 3.6.5
Protostar template

The setting "Height consistency" is deactivated, but I still have the same problem.

NOTE: This problem is with the product page, and NOT in the product listning.

Any more advice ?

tnx

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

  • Posts: 4820
  • Thank you received: 654
  • MODERATOR
8 years 4 months ago #260815

Hello,

You can use an "@media" command in order to add some Css but only for some specific screen size.
View here the theory in order to understand the way it work.

Concrete example :

.hikashop_product_main_image_subdiv {
        width:100%;
    }

@media only screen and (max-width: 500px) {
    .hikashop_product_main_image_subdiv {
        width:50%;
    }
}
Here, for explanation for all screen width will be in 100%, and for screen less than 500 pixels will have a 50% as width.
Hope this will help you.

Regards

Last edit: 8 years 4 months ago by Philip.

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

  • Posts: 344
  • Thank you received: 3
8 years 4 months ago #260971

Now it works

I used this line of css code:

.hikashop_product_main_image_subdiv{ width: auto !important; }

tnx

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

Time to create page: 0.078 seconds
Powered by Kunena Forum