Build a Tribute Page - Finished, but need help with adjusting design to viewport size

Build a Tribute Page - Finished, but need help with adjusting design to viewport size
0

#1

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:

Thank you!

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.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-tribute-page


#2

i think you have the right idea already. Yes with mobile first design you would create media queries to handle larger screens (including tablets if you so require).

for eg. if you look up how Bootstrap does this, you will find this documentation:

Media queries
We use the following media queries in our Less files to create the key breakpoints in our grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }