White space problem between images

  • Recently I went from Blogger to WordPress. I used an import plugin and everythink looks fine, except from the whitespace between pictures. It looks like a mess right now. When I use an enter break I see it in the visual editor, but it doesn’t work when the blogpost is running live. I either get no enter break or, when I use the enter break twice, way too much white space.

    When I draft a new blogpost I have the same problem by the way.

    Manually adding   or
    in the text editor also doesn’t work. What could be the problem and how can I solve it?

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

  • It would help us help you if you posted a link to your site.
    Suggest that you install and use firebug to see how your css is being used.

    Thread Starter Shalini_PuBo

    (@shalini_pubo)

    Hi RossMitchell,

    Thanks for your response. This is my website: https://orientalspiceandsomechocolate.com

    I know a little about CSS but not much. I came up with the concept of this design, but someone else did the coding. Also notice the restricted area pop-up which only appears on page 2.

    (My website is currently under construction by the way, I use the WP under construction plugin)

    Unfortunately WP suffers from built in bloat. By default everything is stupidly large, including the spaces. I assume you mean the vertical space between images as they are stacked thus. A lot of the space in between is as a result of the paragraph return, particularly in your case above and below the text of your picture captions (actually an integral part of the line of text). The only way of changing that is to alter the css for <p>

    I wouldn’t worry about it though. Your site doesn’t look too bad.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    This bloat is actually designed in by the developer, it is from CSS. CSS is developed by theme and plugin developers, that is what you see on websites. It is not WordPress on the front-end.

    Thread Starter Shalini_PuBo

    (@shalini_pubo)

    – @digbymaass: what would you add to the css for paragraph?

    – Can I work around it? Like making the captions part of the image? Like for example this: https://cdn3.wpbeginner.com/wp-content/uploads/2014/04/gallerycaptions.jpg and then with the border around it? What would I have to add to the CSS?

    – If not: can I manually add a code in the text editor to get one (or two) line(s) of white space?

    Andrew, yes of course. But the developer and WP are sort of synonymous! It’s odd. People designing with Dreamweaver don’t do it. And it’s catching. Sites not made in WP are also becoming hugely overinflated. On the new forum for Ordnance Survey open source mapping it’s so extreme I saw a post that took the entire height of the browser page with huge title bars and assorted stuff; on my large screen, the last line being “Dear Alan…”

    Shalini_PuBo you need to adjust the ‘space-before’ and ‘space-after’ of p. I think that’s how your p is defined in your css (I might be wrong). There is a css editor in WP. Under Appearance – Editor. It should bring up the css file of your theme. On mine p shows like this:
    p {
    margin: 0 0 24px;
    margin: 0 0 2.4rem;
    padding: 0;
    }
    You should google space before etc in relation to css and write the appropriate settings in between the curly braces. https://www.w3schools.com is a good place to look.
    Also bear in mind that there may be more than one instance of p in the css. eg on ours .entry-content p, which is a stacked css declaration. The WP editor is hard to use. Ideally you want to use Firefox’s inspector to see what css is controlling what, and a free css editor like BBEdit(?) and an FTP program. It’s a lot to learn.
    I have so many things to solve on our own site I can’t get any more specific. Sorry!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘White space problem between images’ is closed to new replies.