Layout Issues: Aligning Images

  • Unknown's avatar
    thooleiblog · Member ·

    Hi there,

    My images, when aligned, are very close to each other in the admin section, but when published, appear further apart:

    စီမံကိန္းအေၾကာင္း About

    There’s too much white space between the images on the left and the image of text on the right. And below these the images and text are tighter but there’s too much white space on the right hand side.

    I’ve been advised to set them up as a gallery or by using more specific html in the text editor, in order to adjust the display and have more control over how it turns out.

    If you could help show me how to do this, I’d be grateful.

    Many thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    innisfreehomestead · Member ·

    Hello!

    Rather than fiddling with HTML and CSS, I agree that a gallery would be the way to go. Here’s a walkthrough on how they work and how to place one on your page https://en.support.wordpress.com/gallery/

    Hope that helps, let me know if you have any further questions!
    Sage

  • Unknown's avatar
    technosoftconsultancies · Member ·

    I’d rather suggest you to increase the width of the images to the left. What is happening is that when you are publishing your post, the images are not occupying the full width it can.

    Just do this.

    Edit the post, go to HTML in your backend editor and then for the <img> tag add this code.

    style=”width:47%”;

    <img class=”wp-image-387 alignnone” src=”https://bawgataprojectcomsite.files.wordpress.com/2016/05/bhp-benefit-sharing.jpg” alt=”bhp-benefit-sharing” style=”width: 47%; height: auto;”>

    Let me know if this helps :)

    -Pratik

  • Unknown's avatar
    thooleiblog · Member ·

    Thank you both for your helpful tips and suggestions.

    I couldn’t get the gallery option to work the way I wanted – so I used the code instead. I’m really happy with the way the layout has improved as a result:

    စီမံကိန္းအေၾကာင္း About

    There’s one very small tweak I’d like to make if possible, just to fill in a small white space between photo and text on left hand and right hand sides – on the webpage now, I’d like to move one photo down a space, and the text below it up a space to tighten things up.

    Is there any html adjustment I can make here to resolve this?

    Many thanks,

    Alex

  • The topic ‘Layout Issues: Aligning Images’ is closed to new replies.