Wrapping text around image issue
I'm missing something here ...
Why isn't the text wrapping around the image with
shape-outside on these two images?
https://codepen.io/amarlong/pen/jOppwwr30 Replies
you realize you don't need grid to wrap text around image right?
Yes, but if I wanted to use grid, how would that be done?
Say if I wanted the img and text to stack vertically on mobile.
you wrap the image at the width you want with min-width media query below they will load in order of html
Ok, but if we separate these two ... so first, how would I wrap the text like you did, but with the grid set-up?
i'm failing to see what you want to achieve
As you see, the text is overlapping the image because of the html order, and because I've set the areas that they take up. I still want the text to wrap around the shape. Maybe best visualized in the second example where the image is acting like a background, with the text on top of the entire image.
I want to achieve just what you did, but with the grid layout, and with the text on top of the image.
https://codepen.io/amarlong/pen/jOppwwr
Put a different way: why isn't the text reacting to the shape I've put on the image?
but why do you use grid to stack them on top of each other in the first place ?
I don't think you can have an image in one grid cell affect the layout of text in another
but to answer your question add an empty div to your text and give it a size the same as the image and apply the shape-outside on this
they have to be in the same context for them to interact
Ok, so ...
The solution you gave @mannix_ works, thanks! But @jochemm isn't the text and image in the same cells? that's why they are overlapping:
.fig-two {grid-area: 1 / 1 / 1 / -1;}
.text-two {grid-area: 1 / 1 / 1 / -1;}I don't think it works that way, but if it's solved it's solved, just ignore me 🙂
the shape-outside need something to wrap around, when you stack them on top of each other there is nothing to wrap around
Aha! So even though I'm not using z-index or order, the intrinsic stacking of html doesn't allow this when you use grid (and without your extra div, Mannix)? That's good knowledge to have I think
what? z-index/ order is just if you want to change the order of the appearance let say your html looks like this
with this example when you use grid to stack them on top of each other the image will cover the text so you either change the order in html or use z-index/order to push the
p in front of the image
think of it as layers in photoshopYes, we're saying the same thing, hehe. Injust mean it's nice to know the limitations of the grid, and how html and setting areas effect other properties, in this example the shape-outside.
i don't see any limitation here but ok 🙂
No, hehe, I agree, not when you use the extra div. But intstintively I thought the shape would affect the text without an extra div just because you define a shape in the grid cell itself, and both elements live in that cell. Looking at the dev tools it kind of made sense that it would.
they live on top of each other not next to each other. so shape-outside don't have anything to wrap around also grid will prevent it from working since they will live in two different columns
Hmm ... yes.
This is not your battle to have, hehe. I do accept the ordering, and the effect the html mark up has, but I don't understand why the grid will affect it as long as you ask them to live in the same columns and cells like I have.
But hey, now I know, and you have given a solution. We can move on, hehe! Thank you!
because
and i will state this for 3rd time
they live on top of each other not next to each other.
Yes, they live in the same building (grid-area), but on different floors (on top of eachother), not the same appartement
Had this come up here year back and I made this. https://codepen.io/b1mind/pen/qBbrqgj
But sure if it helps but 🤷♂️
Correct me if I'm wrong but isn't this what float is for?
My example shows both you decide
Two different situations and from reading it's the use case I made idk I'm still having coffee
Thank you very much! 😄