Project Part 1 Solution – Responsive Web Design Fundamentals

Project Part 1 Solution – Responsive Web Design Fundamentals


All right. So this is going to be
the 30 second version. If you want more detail, check out the
next video where I’ll be spending seven or eight minutes really diving into
how I use dev tools to make changes. The meta tag looks like this, copy and paste this line into the head of
your HTML and you are good to go. In order to make everything
display in a single column, I needed to make it take
up the full viewport. The basic idea is that I ran
through the CSS looking for any containers with fixed
widths set smaller than 100%. Then, I simply made them 100%. Using a relative width of 100% means
that an element is going to take up as much space as it can, which means that if you’ve got
a container it’ll take up the viewport. Tab targets that’s easy just
add some padding to all of your a tags I used 1.5em and
after that I tested, and here it is on mobile and
here it is when the screen gets wider, notice that everything is
taking up the full viewport. Now if you want the full story of how
this happened watch the next video.

Leave a Reply

Your email address will not be published. Required fields are marked *