Single Product Layout issue on mobile

Hello!

I have a problem with Single Product Layouts in mobile view.

When selecting a predefined Layout under the “Create Layout” tab (See image 1) and clicking “live preview”, it looks great both on desktop and mobile with nice padding/margins (see image 2).

When creating the new layout with your predefined templates, it looks fine in the Gutenberg editor (see image 3). But even with NO alterations at all, it doesn’t look good in the front end. The margins/padding are completely gone and all content goes all the way to the edge of the screen (see image 4).

Am I doing something wrong? I would assume it should look like your own preview.

The default Woocommerce single product layout looks just fine, but when I try to create my own with Your predefined layouts, the padding/margins are gone in the front end on mobile, even though it looks fine in the editor.

I tried clearing all cache and removing all custom CSS but that doesn’t change anything

Attachments:

You must be logged in to view attached files.

Hello,

Sorry to hear about the inconvenience. Kindly, please share your Site WP-ADMIN Login details in the Private Content field so that we can check this concern on your Site and help you out accordingly.

Best Regards,

[Kejserjorn]

I have shared the details in the Private Content field.

It is a staging site. Feel free to test anything. But kindly let me know if and how to fix it, as it has to be fixed in my live site also

• This reply was modified 1 month ago by Kejserjorn.

Hello,

Navigate to Layouts > Edit Single Product Layout, then locate the columns where elements are shifting to the left. In the Advanced settings panel, adjust the padding values to properly align the content.

See the Screenshot for a better understanding: https://ibb.co/5X0zQ45s

Best Regards,

Sure, I can do that. But why is the padding not correct like in your preview?

If You look at the previously sent screenshots you can see, that your own preview of the predefined layout has padding on both sides. But the actual layout when created does not. Why are they not the same?

Hello,

Once you create or import a layout, it’s placed into your actual theme context, which might have different spacing or overrides, especially in mobile view. That’s why some adjustments (like padding/margins) are necessary after importing to match the preview appearance.

To resolve this, please adjust the column padding inside Layouts > Edit Single Product Layout as described earlier. This will give you full control over the appearance across devices.

If you have any questions, feel free to contact us.

Best Regards,

[Author]

Posts