What is Responsive Web Design?
Is your website mobile ready?
This concept worked for a while however, this was exceptionally impractical and as screens got bigger, slimmer, wider, taller and touch screens became more responsive. How do you solve this problem? Say hello to Responsive Web Design!
Using a code called “boot strap” a websites pages are broken up into columns and rows. You can have unlimited rows but only 12 columns. By placing your content correctly inside this layout, as the page scales down the code will adjust and correctly display your website for any screen size.
Rows can be any height and are unlimited. A row starts as a <div> tag and has a class tag applied to look like this <div class="row">. Inside this you will place your columns as this will let the code know that this row is different to the ones above and below and responds differently.
Next are your columns. The columns class can be used up to 12 times to make 12 columns.
You can use 1-12 times providing the sum always equals 12. For example,
<div class="column-12"> This column will fit the whole row as it's 12 wide
<div class="column-4"> <div class="column-8"> Here we have 2 columns, 4 wide and 8 wide to make 12
What if it doesn't equal 12?
<div class="column-6"> <div class="column-7"> The total columns now equal 13 (6+7). By doing this your website will have unexpected results depending on the text, video and widgets inside this code.