After seeing the use of some Responsive Grid Systems (starting from a simpler solution and going for a more complete solution), let's structure our code using the Foundation4 Grid, creating the response quickly, and without writing one line of CSS code to do that. Also, remember to configure the viewport in the <head>
tag.
Using the Foundation4 Grid, perform the following recommended steps:
Start coding the HTML script.
Identify the rows in the structure and add a
row
class to the existent element or to a newdiv
tag.Measure how many columns each main element will fill and set this value in the classes.
Let's see how it is done in the following HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>Responsive Web Design using jQuery & CSS3</title> <link rel="stylesheet" href="css/foundation.css" /...