Skip to content

Instantly share code, notes, and snippets.

@premanshup
Last active June 17, 2020 05:50
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save premanshup/4c321793ba8b3c7bbb9c3575502b70b0 to your computer and use it in GitHub Desktop.
Save premanshup/4c321793ba8b3c7bbb9c3575502b70b0 to your computer and use it in GitHub Desktop.
CSS for compatibility with Gutenberg Group and Cover blocks.
@media (min-width: 1200px) {
/* With container - Sidebar/No Sidebar */
.ast-separate-container.ast-right-sidebar .entry-content .wp-block-group.alignwide,
.ast-separate-container.ast-left-sidebar .entry-content .wp-block-group.alignwide,
.ast-separate-container.ast-right-sidebar .entry-content .wp-block-cover.alignwide,
.ast-separate-container.ast-left-sidebar .entry-content .wp-block-cover.alignwide,
.ast-no-sidebar.ast-separate-container .entry-content .wp-block-group.alignwide,
.ast-no-sidebar.ast-separate-container .entry-content .wp-block-cover.alignwide {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
.ast-separate-container.ast-right-sidebar .entry-content .wp-block-group.alignfull,
.ast-separate-container.ast-left-sidebar .entry-content .wp-block-group.alignfull,
.ast-no-sidebar.ast-separate-container .entry-content .wp-block-group.alignfull,
.ast-separate-container.ast-right-sidebar .entry-content .wp-block-cover.alignfull,
.ast-separate-container.ast-left-sidebar .entry-content .wp-block-cover.alignfull,
.ast-no-sidebar.ast-separate-container .entry-content .wp-block-cover.alignfull {
margin-left: -6.67em;
margin-right: -6.67em;
padding-left: 6.67em;
padding-right: 6.67em;
}
/* Without container - Sidebar/No Sidebar */
.ast-plain-container.ast-right-sidebar .entry-content .wp-block-group.alignwide,
.ast-plain-container.ast-left-sidebar .entry-content .wp-block-group.alignwide,
.ast-plain-container.ast-right-sidebar .entry-content .wp-block-group.alignfull,
.ast-plain-container.ast-left-sidebar .entry-content .wp-block-group.alignfull {
padding-left: 20px;
padding-right: 20px;
}
/* Full Width / Contained - No Sidebar */
.ast-plain-container.ast-no-sidebar .entry-content .wp-block-group.alignwide .wp-block-group__inner-container,
.ast-plain-container.ast-no-sidebar .entry-content .wp-block-group.alignfull .wp-block-group__inner-container,
.ast-plain-container.ast-no-sidebar .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container,
.ast-plain-container.ast-no-sidebar .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: 1240px;
margin-left: auto;
margin-right: auto;
padding-left: 20px;
padding-right: 20px;
}
/* Full Width / Stretched - No Sidebar */
.ast-page-builder-template.ast-no-sidebar .entry-content .wp-block-group.alignwide,
.ast-page-builder-template.ast-no-sidebar .entry-content .wp-block-group.alignfull {
margin-left: 0;
margin-right: 0;
}
/* Cover Image */
.wp-block-cover-image.alignwide .wp-block-cover__inner-container,
.wp-block-cover.alignwide .wp-block-cover__inner-container,
.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.wp-block-cover.alignfull .wp-block-cover__inner-container {
width: 100%;
}
.ast-page-builder-template.ast-no-sidebar .entry-content .wp-block-cover.alignwide,
.ast-page-builder-template.ast-left-sidebar .entry-content .wp-block-cover.alignwide,
.ast-page-builder-template.ast-right-sidebar .entry-content .wp-block-cover.alignwide,
.ast-page-builder-template.ast-no-sidebar .entry-content .wp-block-cover.alignfull,
.ast-page-builder-template.ast-left-sidebar .entry-content .wp-block-cover.alignfull,
.ast-page-builder-template.ast-right-sidebar .entry-content .wp-block-cover.alignfull {
padding-right: 0;
padding-left: 0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment