| DannyA |
09-13-2016 02:50 AM |
The easiest way to get started is to use Bootstrap and learn how to use the grid system ( CSS · Bootstrap ). It's actually a lot easier than it seems. You set your main container div to have a .container class, then each row you want to create is div.row, and each "cell" I guess you could call it has a .col-xx-#. The xx is the screen size (md for default) and the # is the # of columns it should span (there are 12 in total). Like say you want 6 thumbs per row on a computer but 2 on a phone. You'd put a class of "col-md-2 col-sm-6" so it spans 2 on a computer and 6 on a phone. You can of course repeat the process inside cells to create smaller subgrids.
You might not like the padding on the cells, but you can always create another class with different padding and put it on each col element to change this. If you want a width that's not available, copy a col class and change the width and use that. You'll run into this if you want to do something like have 5 thumbs per row. The new width you'd use is 20%.
If you understand that, start with a totally clean HTML file with all the bootstrap includes and start blocking out your elements from largest to smallest, just with placeholder text in them. Figure out what the column counts would make sense on a computer and a phone and assign them both. Tweak it and test it out by shrinking your browser as small as it will go. Once that all makes sense you can copy all the old stuff that doesn't need to be made responsive wherever it belongs.
The one other thing you'll want to note is shrinking the browser doesn't always give you the whole picture. It should be pretty accurate, but in Chrome's developer tools you can set it to actually display as it would on different models of phones and tablets. |
