• rollout

    (@rollout)


    The whitespace between blocks is large. I would like to reduce it to zero and add my own space.
    For example, the whitespace before and after my image block is about an inch on a full screen desktop. How do I reduce this?

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Jarret

    (@jarretc)

    Hi, the whitespace above the image in the center is due to the <p> element that is displaying the 8 article titles above and to the left of it.

    Are you wanting the image to be displayed to the right of the 8 article titles?

    Thread Starter rollout

    (@rollout)

    Hi,
    I would the gap between the picture of Giuliani and the headline to be very tight. Also, I want the gap between the headline and “Dedlock” to be very tight. I want these to be centered. See the wwww.drudgereport.com. I am trying to emulate that site.

    Thanks

    Jarret

    (@jarretc)

    Add the following into Appearance->Customize->Additional CSS

    .home .post-20 .wp-block-image:nth-of-type(1) {
    	margin-bottom: -40px;
    }
    
    .home .post-20 .wp-block-image:nth-of-type(3) {
    	margin-top: -40px;
    }

    Note: these settings will only work for that post in particular, see the .post-20 class in the code. If you move to another post in that area, it may need to be adjusted accordingly. You can modify the -40px values accordingly to your liking.

    Thread Starter rollout

    (@rollout)

    Thank you. That worked.

    Where do I find the “.post -20” if I want to make more changes? For example, I added an image to the top-left of the screen. That gap is too big.
    Also, the gap between lines of text is huge: “Bloomberg all in chance of a lifetime…” When this sentence wraps around, there is an inch of whitespace between each line of text. Why can’t I edit this in the wordpress visual editor? It seems kludgy to have to modify code.
    I am new to wordpress and started using it last week. I haven’t coded in HTML in 22 years. We didn’t have wordpress in those. It was all coded by hand.

    Jarret

    (@jarretc)

    You would have to view the source code to find the element containing the .post-20 class. The visual editor can work well, but the issue is that you’re using Twenty Sixteen which is a pretty old theme. Gutenberg (blocks) weren’t really around at that time so the theme doesn’t have very much support for it.

    If you were to use a newer theme such as Twenty Twenty or one released in the last ~6 months, chances are you’d have much better support for blocks and how they appear in the editing dashboard matching the front end of the site.

    Thread Starter rollout

    (@rollout)

    Maybe I will try a newer theme. Thank you.

    Jarret

    (@jarretc)

    You’re welcome! If you try out some other themes and decide you want to stick with Twenty Sixteen, you can respond back here with what you’re wanting to do and I can try to provide more help ??

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Remove whitespace between image block and block below it’ is closed to new replies.