🗃️U1LA4 Lab: ChefHub Goes Mobile
How can media queries at certain breakpoints be used to make for a responsive webpage?
Teacher Notes
Leading up to this Lab, you may want to model again how to inspect a page and use the Toggle Device Toolbar. Point out specifically the dimensions of the webpage at the top so that students can use this to validate that their breakpoints are working. This is explained in step 0.
Students should utilize the Starter Code (repl.it | github) for this project.
Prompt
You've gotten hired for the web design job you were looking to get! The company that hired you is called ChefHub, a social media platform for chefs to collaborate with other chefs and to share their recipes, menu designs, and more. The person who left the role you're filling created a beautiful website already, but it only looks great when it's in full screen on a laptop. You've been brought in to make it look good at all sizes - especially on a mobile phone.
Screen Sizes For the entirety of the directions, this lab will be refer to 4 screen sizes: x-large (default), large, medium, and small. There are more sizes (eg. x-small and xx-large) but only the 4 mentioned will be used here. These are the breakpoint dimensions for the width of screen that you should refer to when writing the @media
queries:
Small
: 0px - 768pxMedium
: 768px - 992pxLarge
: 992px - 1200pxX-Large
: 1200px +
Directions: Your task is, at each level, to apply breakpoints to change the layout of the page so that smaller screen sizes are accommodated for. The instructions below will guide you through this process incrementally until, at level 5, you have a fully adaptable webpage.
There's two things you should prepare before going into these levels. First, get comfortable adjusting your screen size. The best way to do this is to inspect the page (right click anywhere and click inspect) and click the Toggle Device Toolbar button or on keyboard press
CTRL+Shift+M
(orCMD+Shift+M
on Mac). This will allow you to see the screen width dimensions while adjusting the screen width. The second note to be aware of is that all the CSS has already been written for theX-Large
screen size by default for all levels 1-5. You will be writing@media
queries with themax-width
parameter to account for the relatively smaller screen sizes. For example:For level 1, the photos are arranged using CSS Grid. Peak at the ruleset for
.main
for the syntax, and usegrid-template-columns
to change the photos so that they are arranged into 3 columns when the screen isLarge
andMedium
, and 1 column when the screen isSmall
. Remember, your@media
queries should be at the bottom of your CSS code. Use the links to the exemplar to see what your results should look like. If you're stuck, here's the code for the first breakpoint:Now that you have the columns sorted, let's fix the margin a bit. At
Medium
, change the margin of.main
to20px 50px
and forSmall
, change it to10px
. Try it first before reading on. If you're stuck, here is what the other 2@media
queries should look like in full:For level 2, scroll to the bottom of the page. We'll be adjusting the footer. If you start playing with dimensions making the page smaller, you'll notice that the cards from level 1 already adjust as per the
@media
queries you just added. Thelevel_one.css
is linked for you already on top of thelevel_two.html
. This pattern will continue as you move through the other levels.In level 3, adjust the
.header
class in following two ways:When the screen is
Medium
and smaller, usejustify-content
to center the items.When the screen is
Small
, usespace-around
instead withjustify-content
. Also, change thefont-size
tomedium
, thepadding
to10px
, and thegap
to20px
.
Now, for level 4, as the navbar gets smaller, we want to hide certain items and swap the
+
icon on the right side of the screen for another image the is currently hidden. We're going to usedisplay: none;
to hide an item, anddisplay: inline;
to reveal or un-hide it. All of these changes will be made once the screen is sizeMedium
or smaller:In the
level_four.html
, find the class name associated with the navbar items Favorite recipes, Comments, What's hot, and Explore. Usedisplay: none;
to hide these items.In the
level_four.html
, find the class name designated to the plus icon,+
, at the right of the screen, and hide this using the same technique.In the
level_four.html
, the image that will replace the plus icon has the class name.dropdown
. Usedisplay: inline;
to make it appear on the navbar.Lastly, use
justify-content: center;
in a.main-nav
ruleset to center the search bar. The result should look like the exemplar navbar below:
Head over to the extensions for level 5.
Exemplar
When you're done, the page should look like this at full screen (x-large) and like this for example on a large mobile device (medium).
Culturally Responsive Best Practice
This is a technical lab without a lot of choice, but students can still consider layouts and settings that may best serve their own design sensibilities and needs in future projects.
Extra Help?
Not seeing your changes on the screen? Make sure you are typing your @media
queries below all the other code in the CSS. If this is already true, try changing something drastic like font color
or font-size
before something more subtle to test that the breakpoint is working. Lastly, since we're adjusting the webpage from a big size to all the smaller sizes, you should be using max-width
for all the changes.
Extensions
Directions:
Surprise, as you can see by the new addition of the sidebar, this is actually Gordon Ramsey's ChefHub page. For level 5, be especially sure to look at the exemplars to get a good idea of what the design should look like. When the screen size is
Medium
or smaller, the sidebar turns into a second navbar! The goal is to use what you've learned with CSS Grid up until now to reformat the page at this breakpoint. There are two ways you can do this:Method 1: using
grid-template-areas
andgrid-area
. This way is easier, most commonly used, and is the most efficient way, but it is trickier to first learn. Regardless, this is the way we recommend doing it, and the site is currently formatted usinggrid-area
. Checkout this video for an example on how to use it. HINT: In the@media
query, you will need to only change the one parentdiv
.Method 2: using
grid-template-columns
andgrid-column
. This way will most likely feel more familiar to you. It is easier to learn, but harder to implement. In the@media
query, you would need to change all the changed childdiv
'sgrid-columns
.
Choose which ever route you feel comfortable exploring. If you choose to use
grid-template-columns
, be sure to change the pre-writtenlevel_five.css
to be consistent with this method.Currently, if you reduce the screen down to below
400px
, Things start looking a bit weird. Go back and add another breakpointX-Small
to all the individual parts of the page that need adjusting so that things still look okay in this new screen size. The x-small and small sizes should be defined as follows now:X-Small
: 0px - 576pxSmall
: 576px - 768px
Reflection Questions:
Why is it important to have breakpoints in your code?
Whats the difference between starting with a small sized website and building up ("mobile-first") and starting with an x-large sized website and building down ("desktop-first")? Do a little bit of research and see what you can find on which is better or worse and why. Which one makes the most sense and at what time is one approach more sensible than the other?
Last updated