First web page and project submission: Build a Tribute Page

Code Feedback
1

Hey guys. I have just finished my first project. Here is the link:

Any thoughts and/or feedback would be awesome. Thanks and Merry Christmas to all!

2

It needs some work for responsiveness. This is what it would look like on an iphoneX

image
image483×564 35.5 KB

I would suggest using media query to change the margins and font size for mobile devices.
Keep it up!

And a merry Christmas to you too :santa:

1 Like
3

Thanks for that! How did you manage to emulate an iPhone viewport? Did you just adjust the size of your internet browser window, or did you actually view it in an iPhone X?

I would like to emulate an iPhone viewport myself so that I can assess the output of my media query

(don’t worry actually I figured it out - can do it using Google Chrome: https://developers.google.com/web/tools/chrome-devtools/device-mode/#viewport)

4

I was hoping you would ask that…

This page will show you how to use chrome developer tools to emulate different devices.
…everything I write after this will make sense once you read it…

I am fairly new to this myself but so far what I have been doing is this:

  1. set up a custom device to emulate large screen tv 1920x1080
  2. add the preset for laptop monitors.
  3. use the presets for mobile devices and make sure to also check the device rotation

set up your media queries for the different view ports
cycle through those devices and adjust your settings accordingly.

Tip: place a comment over your @media to let you know what layout it is for
ex…
/smart phone vertical/
@media(pixel info here ){ .some-class{ } .some-other-class{ } etc…}

  /*smart phone horizontal & tablets vertical*/
  @media(pixel info here ){ .some-class{ } .some-other-class{ } etc....}

Since you will be styling the same elements you can paste your query as many times as needed and just change the values and device comment.

This way you can set up your page to look just the way you want it across all devices.

5

Thanks! I have added a media query and changed the font size etc so it should look better on an iPhone X screen or smaller. What do you think?

6

Yup,
that did it. looking good

7

thanks :slight_smile: This is such a great forum!

8

Hey,

I’ve been researching this online. Apparently one shouldn’t base media queries on the size of device viewports.

Take a look: https://responsivedesign.is/articles/why-you-dont-need-device-specific-breakpoints/