Paddings from themes are visible on preview

[Olekrut]

Description

Some of the themes have paddings, we fixed it earlier(https://github.com/maxi-blocks/maxi-blocks/pull/5229), but bug is back on preview

Step-by-step reproduction instructions

1. check paddings on preview for 2024,2023,2022, Astra themes

Screenshots, screen recording, code snippet

URL and/or Code editor

No response

How to fix it

No response

Other information

No response

[dosubot[bot]]

🤖

Hey there @Olekrut! 👋 Great to see you back. How have you been since our last encounter?

Based on the information provided, it seems like the issue of visible paddings on the preview for 2024, 2023, 2022, and Astra themes in the maxi-blocks repository might be due to some CSS rules that are interfering with the styles of these themes.

If the issue is related to padding, you might want to check the CSS rules related to padding and margin in your SCSS file. For example, the following rule sets the margin to 0 for the .maxi-block class:

.editor-styles-wrapper .edit-post-visual-editor__post-title-wrapper > * + *,
.editor-styles-wrapper
	.block-editor-block-list__layout.is-root-container
	> *
	+ .maxi-block {
	margin-top: 0;
}

And this rule sets the padding to 0 for the .maxi-block class:

body.maxi-blocks--active .maxi-block {
	position: relative;
	margin: 0 auto;
	padding: 0;
	...
}

If these rules are not being applied correctly, it might be causing the visible padding issue. You might want to check if these rules are being overridden somewhere else in your CSS or by the styles of the themes.

However, without more specific information about the issue and how it manifests, it's hard to provide a more definitive solution.

Regarding the specific CSS rules applied to the 2024, 2023, 2022, and Astra themes in the maxi-blocks repository, the context only provides CSS rules for the Seedlet theme, Twenty Twenty One, Twenty Twenty, Twenty Nineteen, and Astra themes.

For the Astra theme, the following rules are applied:

1. The block inserted position is centered with margin: auto;.
2. The block border radius is set to 0 when the block is highlighted or hovered over.
3. The Astra container is overwritten for the Maxi full width template with max-width: 100%; and padding: 0;. The #maxi-main-container width is set to 100%.
4. The minimum width for reusable blocks containing maxi-block is set to 100% and the maximum width is forcefully set to 100%.

However, without additional context, it's not possible to provide the specific CSS rules for the 2024, 2023, and 2022 themes.

If you could provide more details about how the issue manifests, it would be easier to provide a more definitive solution. For example, screenshots of the issue, the exact steps to reproduce it, and any error messages you're seeing would be very helpful.

You can find the mentioned CSS rules in the maxi-themes-banner.scss file in the maxi-blocks repository.

I hope this helps! If you have any other questions, feel free to ask.

Best, Dosu

Sources

• src/css/maxi-themes-banner.scss

---

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[elzadj]

Ignore docubot suggestions. The fix for frontend is in /core/class-maxi-styles.php, from line 1276, need to change / add selectors for the preview.