Build Mobile-First Website using CSS Grid -4

Image for post
Image for post
Mobile first

Welcome to part-4 of the series. You can find part-3 here.

We will start where we had left and start with the Contact form. We are not using any grid here and the styles are mainly paddings and margins.

Image for post
Image for post
Contact Form

Next, the thing which is remaining is our footer. Here, copyright and social are our two grid items. We are again using the grid-column property to expand them.

Image for post
Image for post
Footer

Now, we will extend this for larger size devices. We will first target the large tablets or small laptops. So, we will write media queries for 960px.

Image for post
Image for post
media query

And our webpage will look like below. Here, we are changing the styles for the grid by giving it a max-width.

Image for post
Image for post
max-width

Next, we will change the style for our navbar. Here, we are also showing our Menu items.

Image for post
Image for post
Menu items

Now our Navbar will look like below on webpage.

Image for post
Image for post
Navbar

Next, we will change the style for our welcome section. Here, again we are targeting the grid item welcome-text and changing the grid-column.

Image for post
Image for post
welcome

Our welcome section will now look perfect.

Image for post
Image for post
welcome section

Now, we will style the projects section. Here, we are making each grid item projects a span four columns. We are also making the third projects a spanning from column 3 to 7.

Image for post
Image for post
Project

It will give this cool effect in our project detail section.

Image for post
Image for post
Project details

Now, on the larger desktop screen we just need to make the grid’s max-width 100% and it will fix everything.

Image for post
Image for post
grid

Now, our webpage will look perfect on the desktop view.

Image for post
Image for post
Desktop view

This completes final part of the series.

You can find the code for the same in this github link.

Written by

UI Lead- ReactJS, JavaScript and everything in-between.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store