The above keeps everything on the same line. However, is there an easier way to target everything inside my container i.e Title & logo or do I need to manual adjust each one? And is it just a case of scrolling to 480px, adjusting the look and then scrolling to the next width and adjusting the look?
I’m assuming I don’t need to worry how my page looks below a certain width…Or I?
This is what confused me when learning @media, I felt like the min/max widths were just arbitrary rather than “small phone, tablet, laptop”
I highly recommend you use a narrow-first approach for styling your page. Start with your browser as narrow as it will go and then style the page so it looks good at the narrow width. Don’t use any media queries. There should be no horizontal scroll bar. If you need to completely start from scratch with your CSS that’s OK. This will be your default CSS.
Once you have it styled properly for the narrow width then slowly widen your browser until you think you have enough room to change the layout to take advantage of the wider view port. This is where you will put your first media query. Use min-width and em units for the break point. You can get the em value by dividing the px value by 16. Add any additional styling for the wider view port in the break point. Repeat this widening process as needed.
As you are widening and adding break points you may find that you need to go back and make adjustments to the default CSS you created for the narrow width. That is fine, but remember to always double check that you didn’t break anything by making your browser narrow again to make sure it still looks good.
@bbsmooth I was going to use your method after but quickly gave the above a go. Now I don’t just want to leave this there as I want to know why list items got me the result I needed and the DIV’s didn’t.
What I’d like to work out is why the Div behaved different to a ‘ul/li’? Both are block elements.
It also solved the issue on my phone and looks just as it does on my desktop.
You are using flexbox for the layout on these so I don’t think it should make a difference which one you use to get the layout you want. Technically, you don’t want to use a list here since this isn’t a list, so it’s not semantically correct. I think you should change it back to a div (or maybe a <header>) and then use <span>s where needed to work with flexbox. Also, you should have “Karl Pilkington” as an <h1>.
I would also recommend that you use em units for the break point instead of px. If I crank up the text size then the “alright…” starts to drift out of the green container and it creates a horizontal scroll bar (and “Karl Pinkington” starts to drift off the left side as well). Using em units automatically takes into account changes in text size.
With a layout this simple you can easily get away with not using a narrow-first approach. But seeing as you are having issues with narrow view ports I recommended it. Most people refer to this as a “mobile first” approach and it is extremely popular and most developers will recommend you use it. I don’t use the term “mobile first” because it implies that you are targeting just mobile devices and then people get bogged down in unnecessary details such as how many pixels they should use for each mobile device they want to target.
I feel like I could spend the next 12 months learning stuff and not actually moving forwards from my tribute page. I’m going to implement the stuff you’ve mentioned (already changed the list items back to Divs).
With learning HTML/CSS is it best to spend a lot of time as I am on this particular thing or move on and I’ll sure come across it again very soon?
Is there a general min width that people use to cover most devices?
I try to perfect everything now so I have an understanding but at the same time I’ve spent so much time on this.
Since this is the first project there is going to be a steep learning curve on this one, so don’t be surprised if it takes you a little longer than you expected to finish it. Making mistakes and learning from others is part of the process. It is better to get it right now then move ahead with the other projects only to make the same mistakes over and over.
I just narrow my browser as far as it will go. Firefox will narrow down to 435px (just over 27em) which is pretty narrow. At that width you aren’t going to have a complex layout, it is pretty much going to be single column for the most part, so narrowing even further probably won’t be necessary. But if you want you can always make it narrower by using the Responsive Design Mode in your browser’s Inspector. Using that I can get the width down to 50px.