Layout issue on product page – large right margin in live view

Hello,

This is how the product appears on our side:

https://www.awesomescreenshot.com/image/58636873?key=f6dce046e138e91e12fa3f4242cd000f

Could this be a cache issue? Please clear all caches and check again.

Thank you.

Best regards,
8Theme Team

Hello @Oliver Theiß,

Could you please try opening the Multiple Single Product Builder once again? It is possible that, due to limited system resources, the customizer did not load the builder panel correctly. We have checked the issue on our side, and the Multiple Single Product Builder opened successfully on the first attempt. We have also adjusted the column widths as needed: https://prnt.sc/gJhi_Lxh8HjI. You can review the result here: https://prnt.sc/pI-7rnE67gUO.

If you require any further assistance, please provide details about what you would like us to improve or share any suggestions for additional features you may need.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Oliver Theiß,

The error shown in the screenshot you attached is related to an issue on your server. Please refer to the following article for more details: https://developers.cloudflare.com/support/troubleshooting/http-status-codes/cloudflare-5xx-errors/error-524/. We kindly recommend that you contact your hosting provider regarding this matter.

If your main request in this topic has been resolved, please mark it as closed. Should you have any additional questions related to this topic, please provide more details. For other inquiries, kindly create separate topics.

Best regards,
Jack Richardson
8Theme Team

Hello @Oliver Theiß,

If you would like both single product templates to have the same layout, you can simply remove the additional template and keep the original one, instead of modifying each template to achieve the same result. However, if you prefer to have different layouts, it would be more appropriate to apply the modifications separately.

Please share your feedback on this suggestion. If you still require our assistance with modifying your single product layouts, kindly provide the URLs of one product with the default layout and another with the modified layout, so that we can compare them and ensure the containers are consistent.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello,

We apologize if we requested additional details earlier. Our intention was to better understand your main request and provide the most suitable solution for your single product layout.

If you would like to achieve the following layout: https://gyazo.com/67eccc5fe86b7c76626a0fa66b6fb0f1, please add the custom CSS snippet we previously suggested here: https://www.8theme.com/topic/layout-issue-on-product-page-large-right-margin-in-live-view/#post-465341. To make the tabs stretch, you can use the following custom CSS:

.single-product-builder .et_column[data-width="100"]:has(.woocommerce-tabs) .woocommerce-tabs {  
    left: 50%;  
    margin-left: -50vw;  
    margin-right: -50vw;  
    max-width: 100vw;  
    position: relative;  
    right: 50%;  
    width: 100vw;  
}

The complete CSS to achieve the result shown in our video is as follows:

body .single-product-builder {  
    max-width: 1170px;  
    margin: 0 auto;  
}  

.single-product-builder .et_column[data-width="100"]:has(.woocommerce-tabs) .woocommerce-tabs {  
    left: 50%;  
    margin-left: -50vw;  
    margin-right: -50vw;  
    max-width: 100vw;  
    position: relative;  
    right: 50%;  
    width: 100vw;  
}

Custom CSS documentation: https://www.8theme.com/documentation/xstore/additional-customisation/optimal-placement-for-custom-css-code/

If this solution still does not meet your requirements, we will forward your topic to another support manager. We look forward to your feedback.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Oliver Theiß,

Thank you very much for your message and for letting us know.
We completely understand, please take your time to review the code example when it’s convenient for you.

We hope you can resolve the plugin issue soon and that everything will work smoothly afterward.
Wishing you a pleasant and relaxing weekend as well.

Best Regards,
8Theme’s Team

Hello Oliver,

Thank you for your message.
If you would like the design changes to apply only to desktop (992px and above), tablet (768px–991px), and mobile landscape (481px–767px), you can include the code globally but wrap it in the appropriate media queries for those specific breakpoints. This way, the mobile version (0–480px) will remain unaffected.

Please make sure that the CSS rules for 0–480px are not overridden by the new code. If you need further assistance, feel free to share the specific code snippet, and we will gladly review it for you.

Best Regards,
8Theme’s Team

Hello @Oliver Theiß,

The color of your mobile icon in the header was set from the Main Header section, as shown here: https://prnt.sc/QTvYkitiO9OV. We have configured it to white, and it now displays correctly on the frontend. Please clear your cache and check again.

Best regards,
Jack Richardson
The 8Theme’s Team

Hello @Oliver Theiß,

Thank you for your message. We appreciate your confirmation and are glad to know that the issue has been resolved.

Have a wonderful week ahead!

Best Regards,
8Theme’s Team