I am having trouble getting everything to fit on smaller screen sizes what am I doing wrong?

[random wharf]

Here is a really crappy picture. Also I am using python flask with jinja so it might explain why the syntax looks weird at parts

Dimension iPhone SE 375 x 667 100%
Mobile S 320px

Here is the css
https://pastebin.com/AJ04Dwfv

Here is the html

https://pastebin.com/uMr6n6BK

[sonic hawk]

Have you tried using mobile-first design? It's pretty much industry standard now, also you don't have any space for it to wrap so it's overflowing

[random wharf]

I plan on it but currently I am following a tutorial and they go in a different order put simply eventually it covers that

[sonic hawk]

How old is the tutorial? lol

[random wharf]

5 years old its a good one though

[sonic hawk]

Might be good but 5 years is a really long time for web development

[sonic hawk]

Do you know how flexbox works?

[random wharf]

https://www.youtube.com/watch?v=srvUrASNj0s

Here is the tutorial in the link above.

From my understanding flexbox allows you you to put an HTML element on the same horizontal line even if they are different vertical lines by default . I mean you can change this . I believe this is called display inline.

I mean it allows other stuff

like spacing

[sonic hawk]

You need to learn how flexbox works more in-depth it'll really help you, I'll send you an article and you can check out the games in #1353760359336644791

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

[random wharf]

okay thanks

[sonic hawk]

It's extremely important to know the parent-child relationships and how they work

[random wharf]

I know it only affects parent + children not grandchildren

[sonic hawk]

Also in mobile-first you usually do a column and then when you hit the media query for bigger screens you switch

[random wharf]

you mean stack then up and down for smaller screens put simply column. And on bigger screens then switch to row left and right

[sonic hawk]

Yes you'd be using min-width instead of max

[random wharf]

oh I see where I went wrong

[sonic hawk]

Since websites are viewed on smaller displays more often than you'd think

[random wharf]

thank you

I see where I went wrong

[sonic hawk]

Also it's a tad hard to explain but even if you set the media query to something like 800px it does take physical size and what not into account

I don't know the exact workings of that but it does that on my laptop in Uni when I was learning and it was a pain in the butt lol

[random wharf]

I am confused by the last part

[sonic hawk]

It takes the literal screen size into account when calculating stuff

So a 15" display might count as below 800px width even though it's 1080p

Kinda like how flagship cell phones have 4k screens and still have a mobile view

[random wharf]

so you could never get the larger screen sizes is that what you are implying because of your 15 inch screen

[sonic hawk]

You can just it can sometimes apply to devices that have smaller screens even if they meet the requirement

If the min-width is 880px I think I used my laptop still displays the original mobile-first view and has to be overriden in the browser

Also codepen is great for sharing HTML/CSS/Vanilla JS

Plus it'd probably save some time not having to make multiple pastes

[random wharf]

okay noted thanks

[random wharf]

should I use device-width vs not viewport width ?

[hollow python]

The underlying problem here is attempting to fit everything horizontally in a narrow space. The standard approach is for the nav to be vertical on small screens. Your CSS explicitly makes it horizontal without regard to screen dimensions.

The recommendation for mobile first is good advice and standard. However, it is not impossible to make this work with desktop first. What is missing is code that allows for a vertical layout on smaller screens. If you used the mobile first approach, you would start with the vertical layout and use extra code to make it horizontal on wider displays.

[hollow python]

The most common unit for media queries is px. There are legitimate reasons to sometimes use ch units, but you are not ready to deal with that yet.

[random wharf]

okay thanks
what you are describing is like picture 2 and 3 I get I see where I went wrong

[sonic hawk]

Or if you wanna go a step further and make it a hamburger menu

[random wharf]

true thanks

[random wharf]

I do have a followup question I think I am going to take your code and make it mobile first but I have a question how do I decide the first media query size. And should I have 3 media queries for small medium and large screens or can I have just a small and a big screen

[sonic hawk]

To start just worry about mobile or desktop mode it's not important to have tablet and stuff

[random wharf]

okay thanks

But the tablet should just be the same as mobile or the same as desktop

Also how do I decide the exact screen size for media queries

for mobile and desktop?

[sonic hawk]

There's no standard for it afaik so I usually just do around 800px

[random wharf]

thanks