I’m adjusting my tribute page to be more responsive, I’ve now figured out ( I think) how to make the title stay on the same line as I decrease screen size.
Before: https://codepen.io/YKKZIP/pen/yLJZyWQ?editors=1100
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”
You will need to address all elements individually, but you can use standard CSS selectors to make this job easier.
For instance, you can define some attributes for multiple elements h1, p, #title {} or add the same class to those elements and then define your changes with .classname {}.
You can use em instead of px in your media queries to address both the size of the font as well as the size of the screen.
How many different layouts you want to create based on different screen width is up to you.
Super helpful and good to know. I feel good that I at least know a bit more than I did yesterday.
I’ve a feeling webdev is an extreme up and down learning experience!
Basically, I want the page layout to look the same at all sizes as it does full screen.
Right now my smartphone is cutting off the ‘KAR’ in the title. I’ve tired 480px max-width, min widths, different sizes, giving it a rest as I’ve making it even more confusing.
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.
Just to update, I used ‘list items’ inside a list container and it seemed to solve the problem I was having and I used @media query at just one point of 556px width and it smoothly expands in and out.
@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.
I think you’re right, I’m in a good position right now as I’ve already learned much more than I would have had I moved on to the next project. I’ll stick with it.
Thank you, I will now give your narrow-first approach a shot
[edit] got it down to 129px so far with a smooth change when expanded.
I use 320px as an assumption for my minimum width, that’s older iPhones. No point in going below that. Then I make sure that the 320px design also looks good on a 400+ px smartphone.
First media query would be 768px. That’s where tablets/laptops start.
Second media query at 1200px for the desktop version.
You can add more, but these should cover the majority of all devices.
