1

I have a blog post here which works fine on a larger screen but not so much on a smaller one.

As you can see from the screenshot below the paragraph breaks very poorly around the image. Given how little space there is to the left, I'd like to make the text get under the image and have the image go full width (might as well) but I don't want to impact the desktop and big screen view.

enter image description here

I understand the basics of responsive design but I'm a bit lost on this particular issue. It is on a WordPress blog but I'm comfortable enough making a custom child theme to create changes. I'm just not sure what to change.

Improve this question
1
  • 1
    Hi Matthew, do you feel as if I answered your question completely? If so, please don’t forget to mark my answer as "accepted" by clicking the gray checkmark to the left of the answer. If your question hasn't been fully answered, please elaborate on what else you need to know so the community can provide you with further help! Thanks! – Maximillian Laumeister May 2 '20 at 6:21
2

Definitely a css thing.

One solution is to use a css @media (min-width: XXXpx) query to disable wrapping if the screen width is small (e.g. set float: none on your figure element containing the image).

Improve this answer
1
  • Agreed - definitely a case for using a @media query to remove the float and replace with something like: margin: 12px auto;. – Rounin Apr 26 '20 at 16:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.