Wraping text around a div and iframe

HTML-CSS
1

Hello,

please see https://forallthetime.com/BI-500/index.html

i am trying to wrap text around a div here and an iframe on location page

what i am after is the wrap text around the image on large screens and a image with all the text beneath it on smaller screens

also, kindly tell me the best break point to use

thanks!

2

Not sure if I understand but you can use float to wrap text around elements.

3

Hello ,

To wrap text around an image, just add .write-up{display: flex;} to your CSS file.

4

thanks!

BINGO!

it wraps!

however,

please see

https://forallthetime.com/BI-800/index.html

as the veiwport gets smaller my chair image gets larger and ugly :frowning:

the text stays wraped, doesnt move below the image as i desire

i am sorry i did not make that clear :frowning:

is a media query appropriate? what would that look like?

oubviously i am still learning here

help, please

thank you

5

Don’t add flexbox to the container (the .chair class), keep it using display: flow-root as that is needed with the floated element. Also use max-width: 100% on the image so it shrinks down as needed.

I don’t see any of the children using float. Float the image to the left.

img {
  float: left;
  max-width: 100%;
}

And keep the container using display: flow-root.

Give the image a class so you can target that specific image and not use the styles I posted on all images (which you wouldn’t want).

6

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.