Group blocks differently

  • Resolved Thobie

    (@thobie)


    1 day, 12 hours ago

    Until now, I’ve used a more traditional design for this website and have been working with the Classic Editor. Now I’ve given the website a slightly more modern design and am working with the Block Editor.

    I’d like to reorganize the individual blocks below the blog as follows:

    • Spring
    • Walk
    • News
    • Email Subscription + RSS Feed + Write Your Own Posts
    • “Forest News”
    • Guided Tour of the Wandsbek Forest

    So 1–1–1–3–1–1.

    But right now it’s 1–3–2–1–1.

    I’m not very familiar with the Block Editor yet. I didn’t get anywhere with the AI either.

    So I can’t figure out how to remove or insert this wide, dark gray separator where it’s messing up the layout.

    Do you have any advice on what I should look for in the Block Editor—or possibly in Code View?

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    1 day, 10 hours ago

    The gray separator isn’t an element per se, rather it’s a padding rule that lets a background color show through. Reduce the related padding rule to 0 to eliminate the “separator”. For example, the first, taller separator rule is this:

    .about,.hestia-about {
    padding: 65px 0 30px
}

    It’s in your theme’s style.min.css file. It’s a minified file, so it’s difficult to edit directly. Also, you shouldn’t want to edit theme files anyway. You can set an overriding rule by adding it to the Additional CSS section of the style book (block themes) or customizer (classic themes).

    I’m sure the other separators are a similar but different rule. Use your browser’s element inspector tool to help you find the relevant rules to override.

    Thread Starter Thobie

    (@thobie)

    1 day, 5 hours ago

    Hello, bcworkz,

    thank you for your answer.

    I’ve now solved the problem.

    When combining the three blocks into Mail/RSS/Posts, I moved one block from the top section down to the bottom. It ended up in the middle of the block, but I simply copied and pasted the content back and forth manually until the layout looked the way I wanted it to.

    As for the separator, I identified the CSS class of the relevant block in the source code and added a margin-top to give the block more space from the block above it, thereby highlighting the dark gray separator.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.