CSS - Mobile View
<nav>
<nav>Let's start by removing this ugly 'bullet points' in our <ul>. In fact, we can just remove those from all of our <ul>s like so:
ul {
text-decoration: none;
}Next, let's center our text for nav ul (this selects any children <ul>s that are inside of <nav>) with text-align: center.
Let's remove the underlines from nav a with text-decoration: none.
Feel free to make any other adjustments, for example with margin and padding. (HINT: Apply a margin: 0 on your <ul>.)
Font Awesome
For the <nav>, we will want to introduce a 🍔 icon that will show/hide our navigation. You've probably seen this effect on most 'responsively designed' websites when browsing the web on your ☎️. We'll use Font Awesome (you should have already linked that stylesheet earlier) to place this icon.
Try pasting this: <span class="fas fa-bars"></span> as the first child of your <nav> (so, it should be above and outside of the <ul>) We are using <span> because that gives us a 'generic' tag that is inline (as opposed to <div> which is a 'generic' block tag). These 2 tags are great when we just need a 'placeholder' to apply some special styles. In this case, we are using special classes provided by Font Awesome. These classes reference the stylesheet that we linked to early via the CDN.
When you refresh your 'localhost', you should see the icon.
That's really small, isn't it? Well, let's fix that in 'style.css'. Let's move all the way to the bottom and add a CSS Comment: /* Class Selectors*/ Since classes override tag selectors in CSS, it's not a bad idea to just put them at their own section at the bottom of the page.
Font Awesome's icons are are actually fonts, not images. So, we'll need to work with font-size (as opposed to width).
/* Class Selectors. */
.fas {
font-size: 4.8em; /* 48px - Gives a nice 'clickable' target as per: https://material.io/design/layout/spacing-methods.html#touch-targets */
}In order to position that 🍔 where we want it, we need to remove it from the 'normal flow' of the document using: position: absolute;. Then, we can position it with: transform: translateX(). The arguments that you pass into translateX() can be as simple as 80vw (or similar) so that the 🍔 gets moved horizontally, essentially 80% of the way across the screen. But, in the video, we see some more exact 'translations.'
Now, in order to get the <nav> to 'hide' and 'show,' we could use some 'utility' classes. To be clear: this is not a technical term - these are the same as any other CSS classes. We just call them 'utility' classes because they are easily used throughout the site for a specific purpose - in this case, 'showing and hiding' things on 'mobile.'
'Utility' classes have simple, descriptive names. In this case, is-hidden--mobile. The -- is also a convention that indicates that is-hidden is or will be modified for different use cases (e.g. mobile, tablet, desktop, etc.)
At any rate, one way to hide these things is to set our font-size and height properties to have values of 0. Make sense?
This works, but then, our 🍔 icon 'spills over' outside of <nav>. It gets totally ignored by <nav>, which doesn't provide enough height to accommodate it. 😞 (Think about why that is. HINT: Look a the video 👆🏾).
To resolve this, we can insist that <nav> be required to have a specific height using the min-height property. Again, one can get as detailed or simple with this as needed - it can be a bit of tedious trial and error or calculation.
Hero
It's common to have a 'decorative' 'hero' section in a 'typical' website layout. This usually consists of a 'stock' background image with a 'centered' button.
The following videos show us how to work with background-image and to use display: flex to center things (similar to what we did in the <header>). We also see the vh units again so that our .hero 'scales' nicely with changing screen heights.
cover is for 'scaling out' an image to make sure that our element is completely covered. Even if that means that part of the image is 'cropped off.'
contain is the same as 👆🏾, but the image *is not ever cropped. It's like a tablecloth. It will cover as much of the image as it can, and that's it. When using cover you will probably notice a 'repeating' or 'tiling' effect, which is almost always undesirable. Use background-repeat: no-repeat to prevent this.
Our 'CTA' 'button' is not really a <button> - it's just a <a> tag. We would only use <button> for something that has some specific JS-driven functionality. For instance, our 🍔 for <nav> above could have been wrapped in a <button>.
We can once again use flexbox to conveniently and perfectly center the <a> and apply some colors and padding to make the <a> look like a 'nice button.' 👍🏾.
Footer
Again, flexbox is great for distributing and aligning content in a single row. Now that you have basics down, here a couple of resources to use to explore more:
Last updated
Was this helpful?