Creating a CSS Grid – Mobile Columns

So we have set up this lovely set of CSS Grids.  But what if we are using a mobile?  Would we want the mobile version of the site to look different?  Let us use a Media Query to change things where we want them.

One option is to set all the columns to 100% so that it doesn’t matter which column number you use, it will occupy the full width of our website.  This should be an aesthetic choice though.  Many web designers may not want to have only one column.  So another option is to set your odd columns to 49% and evens to 49% and have odds float left and even float right (or vice versa).

But you have set up the basics of your grid, so now you can alter the different sizes of each column according to viewports by using media queries.  One thing that would be helpful also is to put media queries for smaller devices at the top, so that when a phone accesses your website, it has to go through less code to figure out what it needs.  This should speed up the ability of the website to present itself.

Posted in Blog Posts, Uncategorized, Web Development Tagged with: , , ,