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/jOppwwr
30 Replies
Mannix
Mannix2y ago
you realize you don't need grid to wrap text around image right?
Å Marlon G
Å Marlon G2y ago
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.
Mannix
Mannix2y ago
you wrap the image at the width you want with min-width media query below they will load in order of html
Å Marlon G
Å Marlon G2y ago
Ok, but if we separate these two ... so first, how would I wrap the text like you did, but with the grid set-up?
Mannix
Mannix2y ago
i'm failing to see what you want to achieve
Å Marlon G
Å Marlon G2y ago
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
Å Marlon G
Å Marlon G2y ago
Put a different way: why isn't the text reacting to the shape I've put on the image?
Mannix
Mannix2y ago
but why do you use grid to stack them on top of each other in the first place ?
Jochem
Jochem2y ago
I don't think you can have an image in one grid cell affect the layout of text in another
Mannix
Mannix2y ago
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
Jochem
Jochem2y ago
they have to be in the same context for them to interact
Å Marlon G
Å Marlon G2y ago
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;}
Jochem
Jochem2y ago
I don't think it works that way, but if it's solved it's solved, just ignore me 🙂
Mannix
Mannix2y ago
the shape-outside need something to wrap around, when you stack them on top of each other there is nothing to wrap around
Å Marlon G
Å Marlon G2y ago
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
Mannix
Mannix2y ago
what? z-index/ order is just if you want to change the order of the appearance let say your html looks like this
<div class="grid">
<p></p>
<img/>
</div>
<div class="grid">
<p></p>
<img/>
</div>
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 photoshop
Å Marlon G
Å Marlon G2y ago
Yes, 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.
Mannix
Mannix2y ago
i don't see any limitation here but ok 🙂
Å Marlon G
Å Marlon G2y ago
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.
Mannix
Mannix2y ago
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
Å Marlon G
Å Marlon G2y ago
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!
Mannix
Mannix2y ago
because and i will state this for 3rd time they live on top of each other not next to each other.
MarkBoots
MarkBoots2y ago
Yes, they live in the same building (grid-area), but on different floors (on top of eachother), not the same appartement
b1mind
b1mind2y ago
Had this come up here year back and I made this. https://codepen.io/b1mind/pen/qBbrqgj
b1mind
b1mind2y ago
But sure if it helps but 🤷‍♂️
vince
vince2y ago
Correct me if I'm wrong but isn't this what float is for?
b1mind
b1mind2y ago
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
Å Marlon G
Å Marlon G2y ago
Thank you very much! 😄
Want results from more Discord servers?
Add your server