Product layout

  • Posts: 80
  • Thank you received: 0
7 years 9 months ago #275526

-- url of the page with the problem -- : www.mangialarossa.com/index.php/en/shop/...ct/1-oranges-tarocco
-- HikaShop version -- : HikaShop Business: 3.1.1
-- Joomla version -- : 3.5.1
-- PHP version -- : 5.6.30
-- Browser(s) name and version -- : Firefox

Hi,
In front end product page, I would like to see the description next right to the image. Now, it is below. How to change it?
In addition, when users have to select the quantity, the layout for the buttons + and - looks strange? How to change for better?

Thanks a lot
Imma

Attachments:

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

  • Posts: 83798
  • Thank you received: 13570
  • MODERATOR
7 years 9 months ago #275532

Hi,

These issues can be fixed with a bit of CSS.
Now I can't look at your link as your website is in maintenance so I couldn't analyse the CSS on the page and thus I can't say precisely what should be done: monosnap.com/file/lv83zEdVt8AijOchNFewjmq7S6ITm2

Also, I would recommend checking this documentation which explains how to modify/add CSS to the HikaShop CSS:
www.hikashop.com/support/documentation/1...ize-the-display.html

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

  • Posts: 80
  • Thank you received: 0
7 years 9 months ago #275581

Hi Nicolas,
Thanks, I managed to change the product layout. Not easy at all. Why does not HikaShop work with drag and drop which could be more intuitive for people like me who does not know CSS/ HTML language?
Imma

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

  • Posts: 26232
  • Thank you received: 4035
  • MODERATOR
7 years 9 months ago #275584

Thank you for your feedback.
We will take it under consideration for futur improvement.

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: 80
  • Thank you received: 0
7 years 9 months ago #275622

Hi,
Now the problem is on mobile. When I open the product pages, the layout is very bad with description overlapping the table containing the variety and price.
Here is the link (to be opened on mobile to see how strange it looks):
www.mangialarossa.com/index.php/en/hikas...ng/product/2-citrons

Could you please help me? Thanks

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

  • Posts: 83798
  • Thank you received: 13570
  • MODERATOR
7 years 9 months ago #275623

Hi,

The problem is with the way you moved the description on the right of the image.
You've added that CSS:

.hikashop_product_description_main {
    position: absolute;
    top: 80px;
    left: 500px;
    color: #964B00;
}

You should have added instead:
@media screen and (min-width: 800px) {
.hikashop_product_description_main {
    position: absolute;
    top: 80px;
    left: 500px;
    color: #964B00;
}
}
That way, it will display properly on mobile devices.

The following user(s) said Thank You: idimarco

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

  • Posts: 80
  • Thank you received: 0
7 years 8 months ago #278094

Hi,

I should have made some CSS changes somewhere and now on mobile, the product listing page ( www.mangialarossa.com/index.php/en/shop ) and the product image and description in the product page ( www.mangialarossa.com/index.php/en/shop/...ct/1-oranges-tarocco ) do not fit again to the mobile screen.

As mentioned by you, I used the CSS code:

@media screen and (min-width: 800px) {
.hikashop_product_description_main {
position: absolute;
top: 80px;
left: 500px;
color: #964B00;
}

So why it does not solve the problem?
Thanks

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

  • Posts: 83798
  • Thank you received: 13570
  • MODERATOR
7 years 8 months ago #278109

Hi,

That CSS change was only to position the description on the right side on desktop and below the image on mobile devices.
Not to change the size of the image dynamically or anything else.
Besides I don't see a problem with your product page on my end:
monosnap.com/file/DCHXQEb8TRcN0Aw01uy8vhGvZBAFSV
So I'm not sure what is the problem. Could you provide more details (like screenshots) ?

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

  • Posts: 80
  • Thank you received: 0
7 years 8 months ago #278194

Hi,

The problem is displaying the product description text is only on mobile for product pages like:
www.mangialarossa.com/index.php/en/shop/...ct/1-oranges-tarocco

The problem is that the description text does not fit to the mobile screen. The same is for the product image which should be moved bit to the left.

The screenshot attached is for the part of description which is not visible on mobile.

Thanks in advance.
Imma

Attachments:

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

  • Posts: 83798
  • Thank you received: 13570
  • MODERATOR
7 years 8 months ago #278202

Hi,

1. The text going out of the screen on really small resolution devices, comes from the CSS:
p {
width: 510px;
font-size: 16px;
line-height: 24px;
margin-bottom: 12px;
}
in the file /templates/shaper_helix3/css/bootstrap.min.css of your template.

2. The image is not responsive. You should reduce its size so that it display properly on all resolutions.
Still, you can use such CSS if you want to change that:
.hikashop_product_main_image_subdiv{ width : 100% !important; }
.hikashop_product_main_image{ height: 100% !important; }
.hikashop_product_left_part { width: 100% !important; }

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

Time to create page: 0.075 seconds
Powered by Kunena Forum