How can I change the css so it fits on mobile? I can't figure out how to make the width smaller, you always need to scroll.

Question

https://code.sololearn.com/WCti9u8xV7VW/?ref=app

Answer 1

To make the width responsive, adjust the elements’ width to 100% or 100vw. Read Yasin Rahnaward and Justice comments. They are more experinced in web than me.

Answer 2

Hofmann
Never and never set a div or any other container element to a static width 100%, rem,px ... it causes overflow instead use min-width or max-width for your div.
add these code to your #flex div
Display:flex;
flex-wrap:wrap

and removed all your statics value for width

Answer 3

Justice Hofmann
There are three ways to making layouts responsive
1. Media query
2. Flexing elements
3. Using grid
It's up to developer how he/she can handle her/his layouts, people usually use media query with flexing or media query with grid which needs alots of time and patient to make the demands output.
But I shared my little experience there is nothing else you cloud use what ever you know and get the result.
[Example]: you have a dive with nth number of elements inside, easily what css can do to mak it response to all devices is just with 6 line code.
Container{
display:flex;
gap:10px;
flex-wrap:wrap;
}
ForInnerItemClass{
display:grid;
gap:1rem;
grid-template-column:repeat(auto-fill,minmax(min(100%,250px),1fr))

}

Answer 4

In addition to what Ugulberto Sánchez , you can use Bootstrap containers that usually do the scaling for you and/or also use Media Queries via CSS.

Here's a page on Media Queries and just as a tip, I like making the background-colors of each query different so I can tell the size of the device I am affecting:

https://www.w3schools.com/css/css3_mediaqueries.asp

Answer 5

Justice for most of case there is no need to media query as they would be helpful but you have to check, handle and add media query to each device size .
https://code.sololearn.com/WF72kzZhngEw/?ref=app

Answer 6

Yasin Rahnaward You stated yourself they would be helpful, haha, so I don't see the harm in letting someone know that is an option. :)

Answer 7

I apllied all the awesome help I got and fixed the issues. HUGE thanks for the help, I learned a lot! :))

https://code.sololearn.com/WCti9u8xV7VW/?ref=app