Tell us what’s happening:
So I wrote the code for the Tribute Page Project a couple of days ago on my phone (I use my phone a lot more than my computer, so I like to see how it looks on my phone first).
I personally think it looks really good when I view it on my phone (feel free to tell me if you disagree), but the design doesn’t work for me on my computer screen. The containers for the different sections are way too wide and the logos at the bottom shouldn’t be so far apart.
I’ve researched media queries, because I’m pretty sure I can fix both those problems easily using one and I get how they work in theory, I just can’t seem to apply it. Since my page does have a mobile-first-design, is it best to go with ‘min-width’ and then just create other css rules that work on bigger screens ? What value would I have to use? I mean, is there a general rule to this? Do I have to specify for tablets as well?
Here is my full page:
And here is my code:
Your browser information:
User Agent is:
Mozilla/5.0 (Linux; Android 7.0; SM-J727P Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.91 Mobile Safari/537.36.