Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Comments: The Gutenberg Layout Problem #11

Open
aristath opened this issue Oct 30, 2019 · 1 comment
Open

Comments: The Gutenberg Layout Problem #11

aristath opened this issue Oct 30, 2019 · 1 comment

Comments

@aristath
Copy link
Owner

@aristath aristath commented Oct 30, 2019

Comments for The Gutenberg Layout Problem

Repository owner deleted a comment from RezaSh13 Sep 9, 2020
@RMo-Sloth
Copy link

@RMo-Sloth RMo-Sloth commented Oct 17, 2021

An alternative approach is old-school relative positioning of the .alignfull block.

Note that I rely on my container to handle floats opposed to applying margin: auto to center the elements inside it. So floating still works. Your solution would cause some unexpected issues when 2 floated elements follow eachother and fit in the same .container.

Did you find a better solution after your post?

.container {
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}
.container>* { /* be aware it also overrides padding for ul and ol, which are not encapsulated in blocks  */
  box-sizing: border-box;
  padding: 0 1rem;
}
.container>*.alignwide {
  width: 100%;
  padding: 0; /* alignwide eliminates the padding; Noone knows what .alignwide is formally supposed to do */
}
.container>*.alignfull {
  position: relative;
  left: calc( 50% - 50vw ); /* calculate the offset */
  width: 100vw;  /* assumed 100vh here, it can be any expression for the desired width, also update that value in left */
  padding: 0 0;
}
body { /* 100vw also includes the scrollbar, unfortunately, so hide it ( that does slice off a very small part of the .alignfull block ) */
  overflow-x: hidden;
}
.alignleft {
  float: left;
  margin: 0 0.5rem 0 0;
}
.alignright {
  float: right;
  margin: 0 0 0 0.5rem;
}
.aligncenter {
  margin:  0;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants