[Skip to main content](#vessel-content) # Order button and Product image moved to the right since 6.2.0 update ## - **[Wella](/forum/user/33127-wella "View Wella's Profile")** - [![Wella's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33127-wella "View Wella's Profile") Topic Author - [ Offline](/forum/user/33127-wella) Less More - Posts: 75 - Thank you received: 10 - - 8 months 4 weeks ago [\#370372](#370372) by [Wella](/forum/user/33127-wella "View Wella's Profile") *[Order button and Product image moved to the right since 6.2.0 update](/forum/25-install-update/910099-order-button-and-product-image-moved-to-the-right-since-6-2-0-update#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")* was created by *[Wella](/forum/user/33127-wella "View Wella's Profile")* -- 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 - [ ![OrderImage.jpg](/forum/attachment/61209) ](/forum/attachment/61209 "OrderImage.jpg") [ ](/forum/attachment/61209?download=1 "OrderImage.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDA5OS1vcmRlci1idXR0b24tYW5kLXByb2R1Y3QtaW1hZ2UtbW92ZWQtdG8tdGhlLXJpZ2h0LXNpbmNlLTYtMi0wLXVwZGF0ZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14290 - - 8 months 4 weeks ago [\#370375](#370375) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Order button and Product image moved to the right since 6.2.0 update](/forum/25-install-update/910099-order-button-and-product-image-moved-to-the-right-since-6-2-0-update#370375 "-- 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")* 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: Code: /* 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](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDA5OS1vcmRlci1idXR0b24tYW5kLXByb2R1Y3QtaW1hZ2UtbW92ZWQtdG8tdGhlLXJpZ2h0LXNpbmNlLTYtMi0wLXVwZGF0ZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Wella](/forum/user/33127-wella "View Wella's Profile")** - [![Wella's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33127-wella "View Wella's Profile") Topic Author - [ Offline](/forum/user/33127-wella) Less More - Posts: 75 - Thank you received: 10 - - 8 months 3 weeks ago [\#370433](#370433) by [Wella](/forum/user/33127-wella "View Wella's Profile") Replied by *[Wella](/forum/user/33127-wella "View Wella's Profile")* on topic *[Order button and Product image moved to the right since 6.2.0 update](/forum/25-install-update/910099-order-button-and-product-image-moved-to-the-right-since-6-2-0-update#370433 "-- 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")* 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 ![:)](/media/kunena/emoticons/3.png ":)") . /* 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 - [ ![Mobile_layout.jpg](/forum/attachment/61219) ](/forum/attachment/61219 "Mobile_layout.jpg") [ ](/forum/attachment/61219?download=1 "Mobile_layout.jpg") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDA5OS1vcmRlci1idXR0b24tYW5kLXByb2R1Y3QtaW1hZ2UtbW92ZWQtdG8tdGhlLXJpZ2h0LXNpbmNlLTYtMi0wLXVwZGF0ZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png?1793428657)](/forum/user/63-nicolas "View nicolas's Profile") - [ Offline](/forum/user/63-nicolas) Less More - Posts: 86358 - Thank you received: 14290 - - 8 months 3 weeks ago [\#370434](#370434) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Order button and Product image moved to the right since 6.2.0 update](/forum/25-install-update/910099-order-button-and-product-image-moved-to-the-right-since-6-2-0-update#370434 "-- 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")* Hi, Here's an improved version that keeps the grid system intact for mobile, only overriding the desktop layout with justify-content: Code: /* ============================================= 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](/forum/user/33127-wella "View Wella's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDA5OS1vcmRlci1idXR0b24tYW5kLXByb2R1Y3QtaW1hZ2UtbW92ZWQtdG8tdGhlLXJpZ2h0LXNpbmNlLTYtMi0wLXVwZGF0ZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Wella](/forum/user/33127-wella "View Wella's Profile")** - [![Wella's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/33127-wella "View Wella's Profile") Topic Author - [ Offline](/forum/user/33127-wella) Less More - Posts: 75 - Thank you received: 10 - - 8 months 3 weeks ago [\#370448](#370448) by [Wella](/forum/user/33127-wella "View Wella's Profile") Replied by *[Wella](/forum/user/33127-wella "View Wella's Profile")* on topic *[Order button and Product image moved to the right since 6.2.0 update](/forum/25-install-update/910099-order-button-and-product-image-moved-to-the-right-since-6-2-0-update#370448 "-- 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")* 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 ![:)](/media/kunena/emoticons/3.png ":)") . 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](/forum/user/63-nicolas "View nicolas's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzI1LWluc3RhbGwtdXBkYXRlLzkxMDA5OS1vcmRlci1idXR0b24tYW5kLXByb2R1Y3QtaW1hZ2UtbW92ZWQtdG8tdGhlLXJpZ2h0LXNpbmNlLTYtMi0wLXVwZGF0ZT90bXBsPW1hcmtkb3du) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop Install & Update Product & Category Display Content Creation Sales and Orders Orders management Reports & Statistics Customers Checkout Payment Methods Shipping Methods Import & Export (CSV, XLS…) Specific Features Affilation Taxes Wishlist Vote Carousel & Slider Mass Actions Filters & Search Discount & Coupon Feature Request Integrations Showcase General Talk about HikaShop Development HikaShop 3.0 Beta Translation Commercial Jobs HikaShop Components HikaMarket Market: Feature requests Market: How to? Market: Bug Report HikaSerial General talk about HikaSerial Serial: Bug Report Serial: How to? Support en Français de HikaSerial (French Support) HikaSubscription HikaAuction Auction: Feature requests Auction: How to? Auction: Bug report Hikashop around the world Support en Français (French Support) Russian FAQ. Курс выживания с Hikashop. Частые вопросы и о Расширения Hikashop Наши сайты на Hikashop 日本語版サポート(Japanese Support) Thai German Archives Bug Report How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.073 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org)