Full width is not full width (outline? border?)

  • Resolved onceuponajrny

    (@onceuponajrny)


    3 years, 8 months ago

    I’m working on my static homepage (not live yet!) and I run into an issue, my full width container is not full width. I had a code recommended to me for adding class to a block:

    .whatever-name {
    margin-left: calc(-100vw / 2 + 500px / 2);
    margin-right: calc(-100vw / 2 + 500px / 2);
    }

    I like that approach vs making the whole page full width. But when I try that with the GeneratePress block it looks really weird and not full width, but it’s ‘disappearing’ on the left (like, it’s completely moved to the left and some part falls off, and there’s more white space on the right)?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi there,

    If you’re using GeneratePress theme, I believe it has a class for that. Try adding alignfull to your blocks.

    That particular CSS basically contains this property.

    .alignfull {
    margin-left: calc(-100vw / 2 + 100% / 2);
    margin-right: calc(-100vw / 2 + 100% / 2);
    max-width: 100vw;
    width: auto;
}
Viewing 1 replies (of 1 total)
  • The topic ‘Full width is not full width (outline? border?)’ is closed to new replies.