Make sure you add overflow: hidden
to the container for your floated content. When a container has only floated elements inside it doesn't take up any height by default, adding overflow: hidden
tells it to take up the height of those elements instead and content that was previously hidden behind your floated elements will be visible again.
There ’s two main approaches we can take when making websites: either we can start at the “desktop first” or “mobile first”. Meaning is the default styling of the website set up for the desktop or for mobile devices.
For us — and for most sites! — we usually start with the desktop design first. This means that the default style we start with is for the desktop and then as the design starts to break on smaller screens we add in media queries to fix the layout and make it look good at those dimensions.
It ’s generally easier to do the desktop development first as the layout is more complex in a design sense, allowing you to get all the more complex elements set up first and then work your way down to the less complex displays. For sites that have a high percentage of mobile users — say a restaurant site! — then a mobile-first approach would make sense as this would be considered the default state and may also be more complex than the desktop site.
The first will centre the element inside it's container where the second centres the text inside the element. You may need one, the other or both to get an element and it's text properly centred on the page.
A vivid colour palette and bold typography are what’s in store for this week’s project. It’s been conceptualised and designed by London based graphic and digital designer Meara Withe (website and Twitter). This website is a very lively one, it’s a real fun and visually striking one to work on!
Note: we recommend listening to The Kinks 1969 classic Lola whilst working on this project.