07. Responsive layouts with Media Queries - Gr0mi4/Hello-World GitHub Wiki

You'll learn how to make the main page to be responsive and look well on all screen sizes. We're going to group all devices by 3 groups:

  • desktop (> 1024px)
  • tablet (> 691px and <= 1024px)
  • mobile (<= 690px)

I - Preparation.

  1. Learn as much as possible about what is Media Query in CSS and what possibilities it provides (find resources by yourself).
  2. Make a new branch feature/media-queries
  3. Add special metatag to the head of every page: <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes" /> It tells a browser how to define viewport width, which is necessary for making the page responsive.

II - Header

  1. Apply media queries to the header so that on tablet breakpoint it would look like here: (Only make the height smaller than on this picture)

  1. Apply changes to the mobile breakpoint as well:

  1. Make sure on the desktop breakpoint it still looks the same as before:

III - Footer

  1. Set width = 100vw, no need to specify media queries.

IV - Topics and cards

  1. Tablet layout:

  1. Mobile layout:

Display only 2 first cards from each topic. Create a link "See More", which leads to the topics page. This link should be visible only on the mobile breakpoint. For the down arrow use pseudo-elements :before and :after to create two lines, apply rotate transformation to achieve the desired angle.

  1. Make sure desktop looks the same as before: