Image / text alignment – text seperation

  • Resolved marls40

    (@marls40)


    9 years, 7 months ago

    Hi,

    I’m having issues with the alignment of text and image in a page article – specifically the way the text becomes separated on this page when I resize the browser.

    http://jimnewcombe.co.uk/about/

    Can anyone advise how I can stop the text from separating like this? I’m not sure whether to set up a media query to handle the breakpoint of if I can specify something more general to stop it happening. The design currently falls apart at a certain width and I would like the text to appear below the image when this happens, as it does in the mobile view, rather than it only happening after there is only one word aligned-left.

    Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn Presner

    (@zoonini)

    9 years, 7 months ago

    You could try something like this in your child theme to force the text below that specific image on smaller screens. You can adjust the max-width value to your liking.

    @media screen and (max-width: 1250px) {
  .about-portrait { 
    float: none;
  }
}

    Let me know how it goes.

    Thread Starter marls40

    (@marls40)

    9 years, 7 months ago

    Thanks for that. I tried that locally and played around withe max-width value but it made the text jump to the right and it was still separated. Would I need to change the alignment of the text also?

    Moderator Kathryn Presner

    (@zoonini)

    9 years, 7 months ago

    I just noticed that your image tag on that page is currently within your first paragraph tag. I suggest putting it outside the paragaph tag and seeing how the new CSS works then.

    Thread Starter marls40

    (@marls40)

    9 years, 7 months ago

    Thanks for that. I have a small padding / alignment issue at the top now but I think that’s done the trick. Thanks a lot!!

    Moderator Kathryn Presner

    (@zoonini)

    9 years, 7 months ago

    You’re welcome! Feel free to start a new thread if you need help with anything else.

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

The topic ‘Image / text alignment – text seperation’ is closed to new replies.