Images being weird

  • Unknown's avatar
    sanarnaturals · Member ·

    Hello,

    On one of my pages I have images of all my products and I cant seem to get control of where those images are located on the page. There are random gaps between images and there are max three images per line even though there is space for more. When creating the page, I made sure to make the html and have all images listed in the same format with the same amount of space between all of them.

    I would like to have more than three images per line and I would also like to get rid of these random spaces on my page.

    Thank you!

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

  • Unknown's avatar
    kosiew · Member ·

    hi,

    I tested your images on my test site:
    https://screenshots.firefox.com/KcpdnXjpFTiPHFar/wp20180808.com
    There were no blank spaces.

    This is what I did:
    1. I saved some of your images to my laptop
    2. created a new post
    3. uploaded all the images to the post
    4. clicked on Insert into Post
    5. publish

    To rule out the effect of captions, I hid all the captions on your page:
    https://screenshots.firefox.com/y3MmP8neiMZzZR1W/sanarnaturals.wordpress.com but there were still unexpected blank spaces.

    Can you share your steps in creating your https://sanarnaturals.wordpress.com/products/ page ?

  • Unknown's avatar
    sanarnaturals · Member ·

    Hi,

    I simply added all the images I wanted to have on the page. However when I did this, it was difficult to position the images in the order and the place I wanted them to be, so what I did was change the html to be uniform throughout all images. I used html to space them all with one line between each image. This seemed to work despite the unexpected white spaces.

    I cant seem to figure out how to post a url linking to my screen shots so please forgive me, but its literally just as I explained. here is an example of my html:

    [caption id="attachment_270" align="alignleft" width="150"]605100002482 front Healthy Skin[/caption]

    [caption id="attachment_277" align="alignleft" width="150"]605100002512 front Chia Seed[/caption]

    [caption id="attachment_226" align="alignleft" width="150"]605100002109 Acenter Colon Cleanser[/caption]

    With one line spacing between each image.

  • Unknown's avatar
    kosiew · Member ·

    hi,

    I checked your hand coded html and found that your figure tags had a mixture of class alignnone and class alignleft.

    That could explain the non-uniform layout of some of the images.

  • The topic ‘Images being weird’ is closed to new replies.