Div Boxes???

[Meringue]

I don't know if I'm allowed to ask for code advice here but, here we are.

so I'm really not good with these div boxes and am trying to get the hang of them. I've Frankensteined some code together here below, but can anyone tell me why my ovals are ovals and not circles???

Feel free to roast me about how bad the structure, or whatever it's called, is.

[div=width: 600px; padding-left: 0px; padding-right: 0px; margin: auto; background: url(https://i.pinimg.com/originals/d6/7c/14/d67c14d751772ab0dd152060788f69ba.jpg); background-position: center; background-size: cover;]

[div=width: 350px; margin: auto;][div=display: flex; flex-wrap: wrap;][div=flex: 1; min-width: 200px !important; height: 200px; margin: auto; display: flex; flex-direction: row; justify-content: space-evenly;][div=flex: 1; width: 150px; height: 150px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 100%;][/div][div=flex: 1; width: 150px; height: 150px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 100%;][/div][div=flex: 1; width: 150px; height: 150px; border: 3px solid #e5e5e5; background: url(https://everipedia-storage.s3-accelerate.amazonaws.com/ProfilePics/6666668721598697015-1490984190.jpeg); background-size: cover; background-repeat: no-repeat; border-radius: 100%;][/div][/div][/div]



[div=width: 90%; margin: auto; background: gray;][div=height: inherit; margin: 2px;]INSERT NAME[/div][/div]


This is hell on earth[/div][/div]

 

[rissa]

Usually coding related questions can be directed towards BBCode Help over in the Coding Lab. You can find it here. As for your question, for some reason flexboxes and image backgrounds don't get along. I haven't slept all night so forgive my lack of detail, but the easiest way around it is to wrap the flexbox around the image container you want.

Like so:

[div=width: 600px; padding-left: 0px; padding-right: 0px; margin: auto; background: url(https://i.pinimg.com/originals/d6/7c/14/d67c14d751772ab0dd152060788f69ba.jpg); background-position: center; background-size: cover;]

[div=width: 350px; margin: auto;][div=display: flex; flex-wrap: wrap;][div=flex: 1; min-width: 200px !important; height: 200px; margin: auto; display: flex; flex-direction: row; justify-content: space-evenly;]
[div=flex: 1;][div=width: 150px; height: 150px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div]
[div=flex: 1;][div=width: 150px; height: 150px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div]
[div=flex: 1;][div=width: 150px; height: 150px; border: 3px solid #e5e5e5; background: url(https://everipedia-storage.s3-accelerate.amazonaws.com/ProfilePics/6666668721598697015-1490984190.jpeg); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div][/div][/div]



[div=width: 90%; margin: auto; background: gray;][div=height: inherit; margin: 2px;]INSERT NAME[/div][/div]


This is hell on earth[/div][/div]

 

[Meringue]

Ah! TY so much! I looked in that section but I'm pretty sure it was locked? Or maybe I'm just crazy.

also I may just be blind but which part is different than it was before? I looked over it a few times and still can't find the difference.

 

[rissa]

Ah! TY so much! I looked in that section but I'm pretty sure it was locked? Or maybe I'm just crazy.

also I may just be blind but which part is different than it was before? I looked over it a few times and still can't find the difference.

Just double checked and BBCode Help is still open-- It's one of the pinned threads.

And there's not much of a difference:

yours:

[div=flex: 1; width: 150px; height: 150px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 100%;][/div]

mine:

[div=flex: 1;][div=width: 150px; height: 150px; border: 3px solid #e5e5e5; background: url(https://pbs.twimg.com/media/CzzVoftUkAAEEW3?format=jpg&name=large); background-size: cover; background-repeat: no-repeat; border-radius: 50%;][/div][/div]

Basically the width code within the outer flex container was doin smth funky

 

[Meringue]

Ohhh, I see I was looking at the one in the help desk! I'll put my questions there from now on. TY again, I figured there was something going horribly wrong somewhere.