Order button and Product image moved to the right since 6.2.0 update

  • Posts: 64
  • Thank you received: 6
10 hours 4 minutes ago #370372

-- HikaShop version -- : 6.2.0
-- Joomla version -- : 5.4.1
-- PHP version -- : 8.3.13

Hi,

For our product page, we are using the “Layout on product page” as “Reversed” unfortunately since the update 6.2.0 also the 6.3.0 we have the same problem.
Problem is that at the product page, the order part as well as the product image, thumbnails are all moved from the center to the right, this was always for the last years perfectly centered nothing is changed in the template. When I go back to the previous version of 6.2.0 all works fine.

I have tried to change the settings of the "hikashop_product_left_part" and the "hikashop_product_right_part" (see attachment) but whatever I do nothing is changed or it looks strange.

Can someone please help me to place it back to the center?

Regards,

Wella

Attachments:

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

  • Posts: 85055
  • Thank you received: 13871
  • MODERATOR
6 hours 19 minutes ago #370375

Hi,

With HikaShop 6.2.0, we did a lot of work to update the layout CSS system to modern standards. This also includes the left/right parts of the product page which rely on that layout system.
I suppose you had CSS to center the elements to your needs, but with the layout CSS changing completely, your custom CSS is not working anymore.

Try adding this CSS code on your website, it should do what you want taking into account the new layout system:

/* Target the product page container row */
/* We use .hikashop_product_page to ensure we don't affect other parts of the site */
.hikashop_product_page .hk-row-fluid {
    display: flex;
    justify-content: center; /* Centers the image and text block in the middle of the screen */
    align-items: flex-start; /* Aligns them to the top */
    gap: 30px; /* Optional: Adds a specific gap between image and text */
}
/* Override default grid widths and floats */
.hikashop_product_page #hikashop_product_left_part,
.hikashop_product_page #hikashop_product_right_part {
    float: none !important;
    width: auto !important; /* Allow div to shrink to content size */
    max-width: 100%;
}
/* Specifically prevent the left part from growing larger than its content (the image) */
.hikashop_product_page #hikashop_product_left_part {
    flex: 0 0 auto;
}
/* Allow the right part to adapt, but optionally limit its width to keep it readable and centered */
.hikashop_product_page #hikashop_product_right_part {
    flex: 0 1 auto;
    /* Optional: Limit the width of the text so it doesn't span the entire remaining width */
    /* max-width: 600px; */ 
}

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

Time to create page: 0.054 seconds
Powered by Kunena Forum