Figure align-left inconsistent

  • idlee69

    (@idlee69)


    2 years ago

    I have added captions to images and clicked on left align and they used to all line up across the page and wrap to the next line perfectly from the left to right as expected. Now the odd image on a new line just decides to float to centre or right. Same in all browsers and have checked with development tools that float:left is active in the css and tried various changes to margins, etc. Any ideas?

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • threadi

    (@threadi)

    I can’t reproduce this. For me it looks like this: https://imgur.com/a/QVJ6JVT

    Thread Starter idlee69

    (@idlee69)

    Thanks for looking and sending your screen shot. I have tried it in FFox, Chrome and Edge and the 4th one always goes in the centre of the next line by itself, then the next 3 in the line below. Similar all over my website. https://www.fdahs.org.uk/temp/screen.jpg
    What browser were you using?

    threadi

    (@threadi)

    I used Firefox.

    What I see with you, I also see when I zoom into the page, 110% zoom is already enough. Turn off your zoom, then it works.

    If you want to fix this cleanly, you should not work with float but rather with flexboxes: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    Thread Starter idlee69

    (@idlee69)

    Interesting! 80% zoom works for me, must be a bug with the browsers then. Not sure how you get flexboxes in WordPress, it seems to reconfigure an image with caption from between <caption> tags to <figure> tags when the page is processed for online.

    threadi

    (@threadi)

    If you did not write the arrangement yourself, then your theme sets it. Since you use TwentySeventeen as a base, this can be a reason. When the theme was created, flexboxes were just emerging. You may want to switch to another theme that supports modern styling methods.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Figure align-left inconsistent’ is closed to new replies.