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

  • Posts: 68
  • Thank you received: 8
3 weeks 1 hour 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: 85187
  • Thank you received: 13905
  • MODERATOR
2 weeks 6 days 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.

  • Posts: 68
  • Thank you received: 8
2 weeks 4 days ago #370433

Hi Nicolas,

I have pasted the entire code to our website and change some code below to place it more to the middle. I hope it doesn’t ruin the code string :) .

/* 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: left; (instead of center)


/* Aligns them to the top */
gap: 85px; /* Optional: Adds a specific gap between image and text */ (instead of 30px)
}

The website on the desktop is now good. My problem is the mobile layout I was trying to look and edit the code for days but no luck. As of now the mobile layout looks like this (see screenshot).

What we want is:
- small order and quantity button and place the top of the image and at the right side
- Image/thumbnail under the order and quantity button, same width as the text inside the tab

Can you please help me with this problem?

Regards,

Wella

Attachments:

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

  • Posts: 85187
  • Thank you received: 13905
  • MODERATOR
2 weeks 3 days ago #370434

Hi,

Here's an improved version that keeps the grid system intact for mobile, only overriding the desktop layout with justify-content:

/* =============================================
   DESKTOP: Center the left/right parts 
   Only apply on screens >= 992px (md breakpoint)
   ============================================= */
@media (min-width: 992px) {
    .hikashop_product_page .hk-row-fluid {
        display: flex;
        justify-content: left; /* or center, as you prefer */
        align-items: flex-start;
        gap: 85px;
    }

    .hikashop_product_page #hikashop_product_left_part,
    .hikashop_product_page #hikashop_product_right_part {
        float: none !important;
        width: auto !important;
        max-width: 50%;
    }

    .hikashop_product_page #hikashop_product_left_part {
        flex: 0 0 auto;
    }

    .hikashop_product_page #hikashop_product_right_part {
        flex: 0 1 auto;
    }
}

/* =============================================
   MOBILE: Stack vertically, full width
   Screens < 992px
   ============================================= */
@media (max-width: 991.98px) {
    .hikashop_product_page .hk-row-fluid {
        display: flex;
        flex-direction: column;
    }

    .hikashop_product_page #hikashop_product_left_part,
    .hikashop_product_page #hikashop_product_right_part {
        width: 100% !important;
        max-width: 100%;
        float: none !important;
    }
}
This keeps the desktop justify-content: left + gap: 85px that you have already configured, while on mobile it properly stacks the columns vertically at full width, matching the behavior HikaShop had before 6.2.0.

The following user(s) said Thank You: Wella

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

  • Posts: 68
  • Thank you received: 8
2 weeks 1 day ago #370448

Hi Nicolas,

New code is working but there are some strange behavior and changes made:
Changes:
- justify-content: left; (is back to center)
Center is used (per advised) instead of left because when image is minimum the image frame is not centered anymore. My example/reference page has multiple images that’s why placing it left was the previous choice, center is better.

- gap: 85px; (is back to 35)
Due to that the frame is now placed at the center, the gap between the image and ORDER button is nog big, the purpose of doing such is to move the image frame more to the center.

Strange:
- when I place the code, save it and open it again, this is what I see, part of the mobile layout code is gone:

/* =============================================
MOBILE: Stack vertically, full width
Screens

The desktop and mobile layouts are now looking good, thank you very much for your support I really appreciate it :) .
I was just informing you about the missing code, I only find it strange or it is normal then I don’t say anything anymore :lol: .

Regards,

Wella

The following user(s) said Thank You: nicolas

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

Time to create page: 0.061 seconds
Powered by Kunena Forum