Don’t worry, we are here to help you with:
Remember, there’s no such thing as a silly question, so don’t hesitate to reach out, we love hearing from you!
We talk about new layout styling techniques such as flexbox positioning, which is a powerful tool for controlling the flow of content with minimal code.
:active
is only for when a user is directly interacting with an element, so in the case of a link :active
will only trigger while they hold the mouse button down on that link. We therefore need to manually add an extra class of .selected
to the link relating to the current page. We'll be expanding on this method with filters when we introduce JavaScript and jQuery next week.
You might be missing a little bit of extra code that was skipped over between videos 20 and 21, here it is:
.list {
max-width: 640px;
margin-left: auto;
margin-right: auto;
font-size: 48px;
line-height: 1.2;
margin-top: 120px;
}
Because there’s no hover event on touch devices, you might need to re-think the mobile design for the optimal user experience.
For this site specifically — because the images don’t link to anything else — the overlay hover effect will work on most mobile devices but will instead be activated on tap.
If the images did link to another page or have some other action on click then depending on the device it'll either ignore the overlay effect entirely — and bring you straight into the click/tap action — or first show you the overlay meaning you'd need to tap again to trigger the click. Neither are optimal, so it's then worth thinking about either removing the overlay entirely or adding the contents of the overlay above or below the image so that it's always visible on mobile.
There's two methods you can use here, the first would be:
.overlay h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is the old-school method, from times before we had flexbox, you'd position the element in the centre of it's container but because CSS is from the top-left corner of an element instead of the centre you then need to transform
the element back across by half it's width and half it's height to get it in the actual centre.
The more modern method is to use flexbox:
.overlay {
display: flex;
align-items: center;
justify-content: center;
}
Which is not only slightly shorter but is also — more importantly — more understandable, something that's very important when coming back to old code and allowing you to easily figure out what you were doing all those weeks, months or years ago!
This week things are getting cosmic. The project has been designed by UK based digital designer and illustrator Nigel Payne (website and Twitter). It explores a space theme with some really striking imagery — we didn’t have to dig too far into NASA’s open image gallery to find these amazing photos. The real challenge here is how to achieve the overlay effect with a centered title. It’s a tricky one, but give it your best shot.
A place for you to post notes about anything on this page. Only you can view your notes.