Custom Layout – Single Product page Issues

My website’s homepage, accessible at https://vinylmasters-ltd.uk/, showcases containers that align neatly with the page content, as illustrated in the “Homepage-Containers” screenshot.

To achieve this consistency, I’ve configured the sections on the homepage to span the full width of the screen, as demonstrated in the screenshot at https://gyazo.com/7949d99f9739a9cb7ed3353312826341.

Furthermore, I’ve specified a custom site width of 1400 pixels, ensuring a uniform layout across various screen sizes, as depicted in the screenshot provided at https://gyazo.com/ba93686f827a55b51bbd5f672e28e2a3.

Recently, I crafted a custom layout specifically for single product pages, showcased in the screenshot at https://gyazo.com/0edd0d0f6336effe02cc5902fb118d3f. During this process, I set the section to full width to maintain design coherence, as seen in the screenshot at https://gyazo.com/1f22fb136324bec05744d519a4ea9536.

However, upon visiting a product page, such as https://vinylmasters-ltd.uk/product/mdp3/, I noticed an issue where the content appears stretched and misaligned compared to the homepage layout. This discrepancy is evident in the attached screenshot labeled “Stretched.”

Despite confirming that the “stretch section” option is disabled for the section, the content on the product page continues to exhibit this undesired stretching behavior.

I’m seeking advice on how to resolve this issue and ensure consistent alignment across all pages of my website. Any assistance would be greatly appreciated.

Attachments:

You must be logged in to view attached files.

In addition to the aforementioned details, when I disable the custom layout and revert to the standard Woodmart settings, the alignment issue resolves itself, as demonstrated in this screenshot: https://gyazo.com/d6fd68d049c74806a3e7347c864cb7cd.

Furthermore, even when I zoom out, the content maintains a consistent width of 1400 pixels, preserving the layout integrity, as evidenced here: https://gyazo.com/52a834ddb2797e32942dcab4446d51f4.

However, upon re-enabling the custom layout for the single product, the alignment issue resurfaces when I zoom out, resulting in a distorted appearance, as depicted here: https://gyazo.com/59052147c419aaa3b30c13c2a41eca07.

Hello,

Please confirm the permission for plugin deactivation, and switch to the parent/default theme. As soon as we complete the testing we will enable all back, You would better make the full backup of your site.

Kind Regards.

[leejay123]

Hello, Luke,

I’m reaching out to provide an update on our website, Vinyl Masters Ltd, which is currently managed through Cloudways. I’ve established a staging version of our site, accessible at this link. For your convenience, I’ve included the admin login details in the private content section.

In our staging environment, I’ve streamlined our setup by deactivating all plugins except for Woodmart Core, WooCommerce, Elementor, and Elementor Pro. This move was aimed at isolating and identifying any issues. As part of this process, I adjusted the Woodmart Layout, with an aim to enhance our site’s appearance. You can view the layout here. Additionally, I’ve modified this layout with Elementor to achieve a full-width section, as shown here.

However, I’ve noticed that the issues we were previously encountering—specifically, the stretching and misalignment of content—remain unresolved. This suggests that these issues are closely tied to the Woodmart theme, as further illustrated in this screenshot, rather than being caused by any other plugins we were using. Further to this, I have switched from the Woodmart child theme to the main Woodmart theme in the staging environment, and unfortunately, the issue persists.

Important Note on Plugin Management:
Please ensure that no plugins are deactivated on our main website. The staging website has been meticulously set up to mirror the main site, containing the exact same plugins and data. This parallel environment allows us to test changes without affecting the live site.

What is a Staging Website?
A staging website is essentially a clone of your live website that serves as a testing ground. It is an invaluable tool for developers and site administrators, allowing them to implement and test changes ranging from plugin updates to theme customizations in a controlled environment. This process helps in identifying any potential issues that could disrupt the user experience or functionality of the live site. Once testing is complete and changes are deemed safe, they can be replicated on the main website with confidence.

I’m eager to hear your thoughts or receive further guidance on how we might address these persistent challenges.

• This reply was modified 9 months, 3 weeks ago by leejay123.

[leejay123]

In addition to the aforementioned details:
Permission to Modify the Staging Website:
You have full liberty to change and edit the staging website. This flexibility is granted to encourage thorough testing and exploration of potential solutions without the risk of affecting the live site. Feel free to experiment with different configurations, themes, or plugins that you believe could address the issues at hand.

• This reply was modified 9 months, 3 weeks ago by leejay123.

[leejay123]

In addition to everything mentioned previously, I’ve discovered a solution. Here’s the link to the solution: https://jumpshare.com/v/yu8iJihomNCMoWEJE8cX.

Initially, I experimented with this on the staging website. After confirming its effectiveness, I implemented it on our primary website.

I believe this information should be shared with the development team.

Elementor sections negative margin must be set to enabled

• This reply was modified 9 months, 3 weeks ago by leejay123.

Hello,

Glad that you found a solution.

So the topic can be closed?

Thank you for your time.

Kind Regards

Yes close

Hello,

Always remember that you can reach out to us with any questions you may have.

Have a good day!

Kind Regards

[Author]

Posts