Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 19, 2020 at 11:56 am #1224030
    jomtones

    Ah… thought I’d solved my problem with this, but nope I just have a wider problem now! https://kriesi.at/support/topic/using-gutenberg/
    Hadn’t tested it with text blocks 🙄 Of course now they’re full width and look ridiculous.

    While testing this, I tried copy /pasting a Medium article of mine into a post. It will obviously take a bit of work to get this looking neat, but you can see how broken the design is without width constraints!
    Original: https://blog.btribble.com/designing-an-analytics-platform-3600234b10ae#.9mxceu11s
    Copied: https://btribble.com/portfolio-item/colorado-blocks-test/

    Is there some way I can fix text blocks, and any other blocks that shouldn’t be full-width?

    Thanks

    • This topic was modified 4 years, 5 months ago by jomtones.
    June 19, 2020 at 12:11 pm #1224033
    jomtones

    Tried fixing with: 

    .entry-content {
	max-width: 700px;
  margin: auto;
}

    But this breaks the full width header and image blocks here: https://btribble.com/new-home/

    All this stuff … just works on straight Blocks sites I’ve made like this!

    ✨ Awake In

    … confused!

    June 19, 2020 at 12:39 pm #1224039
    jomtones

    OK, another attempt. This gets stuff basically inline, but it’s such a mess.

    .entry-content p, .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content li, .entry-content figcaption, .entry-content figure.wp-block-image {
	max-width: 700px;
  margin: auto;
}

    Does Enfold still allow code like:

    [data-structure*="narrow"] to work? I can see this is how widths are set up on my basic Blocks site:

        --blockWidth: var(--containerWidth);
    --blockMaxWidth: var(--narrowContainer);
    --blockWideWidth: calc(var(--narrowContainer) + var(--wideOffset) * 2);
}
    June 25, 2020 at 10:18 am #1225435
    Ismael

    Hi,

    Thank you for the update.

    You can try this css code to limit the width of the content inside the entry-content container and exempt the blocks with the fullscreen class name or keep them fullwidth.

    .entry-content > * {
    max-width: 800px;
    margin: 0 auto;
}

.entry-content > .fullscreen {
    max-width: none;
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.