Support » Theme: Twenty Sixteen » Remove whitespace between image block and block below it

  • 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


    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?



    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 I am trying to emulate that site.




    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.

    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.

    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.

    Maybe I will try a newer theme. Thank you.

    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)
  • You must be logged in to reply to this topic.