i try to make my page responsive but this occurs

[catra]

hi, ive been trying to make my site responsive for bigger screens (1920x1080) and so far it seems like it works, ive got almost everything on every page to work except for my poll on the homepage. if anyone can check what i´ve done wrong, everytime i go to creator mode or what that selective pen is called, it shows that the .container2´s width is the issue, and anytime i remove it in creator mode it goes exactly where it should, but then when i make the width smaller or even 0 in the actual code, nothing changes at all. so idk what it is that im doing wrong exactly?



i would appreciate anyyy help fr, even a little push or shove in the right direction

[glacial_pace]

i would invest some extra time in learning about CSS flexbox. "float" isn't really a good solution in making layouts anymore

here's a quick example of what you probably are looking for (you might have a better time looking at this in a full-screen browser to get the idea, rather than the little JSfiddle window)



in this example, you have 3 columns. "column 1" which is your side bar and then a wrapper around "column 2" and "column 3" which is your main content and poll. everything that needs to break is going to wrapped in a wrapping div with the `display: flex;` property. "flex-flow: row wrap" is doing 2 things: "row" is making them appear in a row rather than stacked vertically and "wrap" is making each element break to a new line when the screen gets smaller.

you can also play around with media queries and change the widths from "50%" to something else when the page gets smaller.

here's a really good guide on it:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

[RogerMexico]

I second glacial_pace here. Replace the floats here with flexbox.

It’ll serve you better n the long run. I’d also suggest flexbox froggy.

[catra]

i would invest some extra time in learning about CSS flexbox. "float" isn't really a good solution in making layouts anymore

here's a quick example of what you probably are looking for (you might have a better time looking at this in a full-screen browser to get the idea, rather than the little JSfiddle window)



in this example, you have 3 columns. "column 1" which is your side bar and then a wrapper around "column 2" and "column 3" which is your main content and poll. everything that needs to break is going to wrapped in a wrapping div with the `display: flex;` property. "flex-flow: row wrap" is doing 2 things: "row" is making them appear in a row rather than stacked vertically and "wrap" is making each element break to a new line when the screen gets smaller.

you can also play around with media queries and change the widths from "50%" to something else when the page gets smaller.

here's a really good guide on it:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

ahh, i can see why float would mess it up tbh, it felt too easy to be good. ill read the guide first bc i still have some questions but perhaps it will answer them, thank u smmmmmm

[catra]

I second glacial_pace here. Replace the floats here with flexbox.

It’ll serve you better n the long run. I’d also suggest flexbox froggy.

actually a pretty fun game after my brain rot w css