Closed Issue with flex + curious about position absolute

[kaninchen]

Hello, I've hit a wall with my latest project and need some guidance. This is my issue: this photo and its container will not grow to fill the screen on a phone. It stays at its designated width as it if were on desktop. Here is the photo and container in question:

The code itself is below >>

Spoiler

[border=0; padding:0; display:flex; flex-flow:row wrap; justify-content:space-evenly; align-items:center; gap:10px; min-width:150px; position:relative; z-index:2;][border=1px outset pink; height:auto; min-width:150px; padding:5px; box-sizing:border-box; display:flex;][border=0; padding:0px; height:300px; min-width:150px; max-width:400px; background:URL('https://i.pinimg.com/564x/b1/cb/4e/b1cb4e299a1bdbd454661d7c700d3c87.jpg'); background-size:cover; flex:2; box-sizing:border-box;][/border][/border][/border]

Now, I have isolated it from the rest of the code because the rest of it is fine. I added the mid-width and max-width values after dissecting a few of my past codes and can't see what I broke. I think I'm missing something, just need a second pair of eyes.

Now for my question and bare with me haha, about position:absolute, is it ever mobile friendly? Say I want to put a circle or square in the corner of the outermost container as decoration or whatever. On desktop, I can just fiddle with the top and left dimensions and have it sit in the corner. But when you view it on a phone, sure it's there, but since the rest of the container is flexing and has become bigger, it's no longer in the corner. It's in the middle, or the top. How else could I anchor that to the corner and have it STAY in the corner regardless of the device?

 

[Nano]

Now, I have isolated it from the rest of the code because the rest of it is fine. I added the mid-width and max-width values after dissecting a few of my past codes and can't see what I broke. I think I'm missing something, just need a second pair of eyes.

I'm assuming the picture is going to be the only thing inside the pink border with something in a separate box next to the pink border box, so I think you just need to do:

[border=0; padding:0; display:flex; flex-flow:row wrap; justify-content:space-evenly; align-items:center; gap:10px; min-width:150px; position:relative; z-index:2;][border=1px outset pink; height:auto; min-width:150px; max-width: 400px; padding:5px; box-sizing:border-box; flex: 2;][border=0; padding:0px; height:300px; background:URL('https://i.pinimg.com/564x/b1/cb/4e/b1cb4e299a1bdbd454661d7c700d3c87.jpg'); background-size:cover; box-sizing:border-box;][/border][/border][/border]

Now for my question and bare with me haha, about position:absolute, is it ever mobile friendly? Say I want to put a circle or square in the corner of the outermost container as decoration or whatever. On desktop, I can just fiddle with the top and left dimensions and have it sit in the corner. But when you view it on a phone, sure it's there, but since the rest of the container is flexing and has become bigger, it's no longer in the corner. It's in the middle, or the top. How else could I anchor that to the corner and have it STAY in the corner regardless of the device?

You can do this using top, bottom, left, and right! The absolutely positioned div will position itself based on the relatively positioned parent div, so if you want something to always stay on the top right corner, you'll do "position: absolute; top: 0; right: 0;". You can offset it from the edge by setting a px, %, etc value too.

 

[kaninchen]

Thank you Nano! Actually, your solution didn't fix my problem but it helped me narrow down where the issue was. I fixed it, but I don't know how lol. I understand absolute position much better now too, I thought the options were more limited.