Your webpage is also going to be opened on a mobile device. So, you need to make sure that all the elements of your web page resize accordingly. This is called responsive design. There are various CSS aspects that allow us to make a webpage responsive. One of them is media queries.
Media queries change the layout of elements as per the conditions set by us. For example, let us write CSS that changes the colour screen when its width gets below 600 pixels.
<style>
@media (min-width: 600px){
Body {
Background-color: red;
}
}
@media (max-width: 599px){
Body {
Background-color: blue;
}
}
</style>
As you might have noticed we use @media keyword followed by braces. Inside the braces, we write the condition. @media (min-width: 600px) specifies that if the minimum width of the screen is 600 pixels then go ahead and change the background to the red colour.
@media (max-width: 599px) specifies that if the maximum width of the screen is 599 pixels then go ahead and change its colour to blue.
We can use media queries to change any CSS property such as size, display, etc based on various conditions.
FlexBox
Flexbox is helpful when we have multiple elements on the page that might overflow when viewed on the small screen.
Flexbox allows us to wrap around elements on a small screen. Let’s see how that works.
We have a basic HTML Page as below
<html>
<head>
<title> Title of the page </title>
</head>
<body>
Simple text inside body.
</body>
</html>
Let’s now create a div element inside the <body>
<html>
<head>
<title> Title of the page </title>
</head>
<body>
<div id= “container”>
</div>
</body>
</html>
We have given an ID to the div so that we can reference it later for applying CSS properties. Alright, let’s now create 12 div elements inside of the container the div.
<html>
<head>
<title> Title of the page </title>
</head>
<body>
<div id= “container”>
<div> 1. This is the demo text</div>
<div> 2. This is the demo text</div>
<div> 3. This is the demo text</div>
<div> 4. This is the demo text</div>
<div> 5. This is the demo text</div>
<div> 6. This is the demo text</div>
<div> 7. This is the demo text</div>
<div> 8. This is the demo text</div>
<div> 9. This is the demo text</div>
<div> 10. This is the demo text</div>
<div> 11. This is the demo text</div>
<div> 12. This is the demo text</div>
</div>
</body>
</html>
Now we will apply some styles to these 12 divisions in the <style> element.
<html>
<head>
<title> Title of the page </title>
<style>
#container > div {
Background-color: springgreen;
Font-size: 20px;
Margin: 20px;
Padding: 20px;
Width: 200px:
}
</style>
</head>
<body>
<div id= “container”>
<div> 1. This is the demo text</div>
<div> 2. This is the demo text</div>
<div> 3. This is the demo text</div>
<div> 4. This is the demo text</div>
<div> 5. This is the demo text</div>
<div> 6. This is the demo text</div>
<div> 7. This is the demo text</div>
<div> 8. This is the demo text</div>
<div> 9. This is the demo text</div>
<div> 10. This is the demo text</div>
<div> 11. This is the demo text</div>
<div> 12. This is the demo text</div>
</div>
</body>
</html>
Now to use flexbox, we use display: flex; and flex-wrap: wrap; CSS properties.
<html>
<head>
<title> Title of the page </title>
<style>
#container {
Display: flex;
Flex-wrap:wrap;
}
#container > div {
Background-color: springgreen;
Font-size: 20px;
Margin: 20px;
Padding: 20px;
Width: 200px:
}
</style>
</head>
<body>
<div id= “container”>
<div> 1. This is the demo text</div>
<div> 2. This is the demo text</div>
<div> 3. This is the demo text</div>
<div> 4. This is the demo text</div>
<div> 5. This is the demo text</div>
<div> 6. This is the demo text</div>
<div> 7. This is the demo text</div>
<div> 8. This is the demo text</div>
<div> 9. This is the demo text</div>
<div> 10. This is the demo text</div>
<div> 11. This is the demo text</div>
<div> 12. This is the demo text</div>
</div>
</body>
</html>
Now notice that if we make our screen smaller, the div elements wrap around as per the screen size. This is a great way to make websites mobile friendly.
Grid Layout
The grid layout in CSS arranges elements in a grid-like structure. Let’s see how that works by creating a simple web page.
<html>
<head>
<title>This is the title</title>
</head>
<body>
</body>
</html>
We will create again 12 div elements for showing how the grid works.
<html>
<head>
<title>This is the title</title>
</head>
<body>
<div id = “grid”>
<div class = “grid-item”>1</div>
<div class = “grid-item”>2</div>
<div class = “grid-item”>3</div>
<div class = “grid-item”>4</div>
<div class = “grid-item”>5</div>
<div class = “grid-item”>6</div>
<div class = “grid-item”>7</div>
<div class = “grid-item”>8</div>
<div class = “grid-item”>9</div>
<div class = “grid-item”>10</div>
<div class = “grid-item”>12</div>
<div class = “grid-item”>13</div>
</div>
</body>
</html>
Let’s arrange all these elements in a grid-like structure by specifying display: grid; in CSS. Also, we will add some more styling to the elements.
<html>
<head>
<title>This is the title</title>
<style>
#grid {
Background-color: green;
Display: grid;
Padding: 20px;
Grid-column-gap: 20px;
Grid-row-gap: 10px;
Grid-template-columns: 200px 200px auto;
}
.grid-item {
Background-color: white;
Font-size: 20px;
Padding: 20px;
Text-align: center;
}
</style>
</head>
<body>
<div id = “grid”>
<div class = “grid-item”>1</div>
<div class = “grid-item”>2</div>
<div class = “grid-item”>3</div>
<div class = “grid-item”>4</div>
<div class = “grid-item”>5</div>
<div class = “grid-item”>6</div>
<div class = “grid-item”>7</div>
<div class = “grid-item”>8</div>
<div class = “grid-item”>9</div>
<div class = “grid-item”>10</div>
<div class = “grid-item”>12</div>
<div class = “grid-item”>13</div>
</div>
</body>
</html>
Grid-column-gap specifies how much gap should be between the columns of the grid. Similarly, the grid-row-gap specifies the gap between rows.
Grid-template columns specify the width of each column. Here we have set it as 200px 200px auto. This means the first column should be 200px wide, the second should be 200x wide and the last one should be set by the browser depending on how much space is available.
Grid and Flexbox are powerful CSS tools to make mobile-friendly websites. As you might be thinking, we have to write a lot of CSS to style our webpage but fortunately, there are CSS libraries that are pre-written so that we can apply styles without writing all code from the scratch. One of those libraries is BootStrap.
Bootstrap allows us to apply styles to the web pages using pre-written CSS.
Search Engine Code Team is comprised of SEO experts and strategists having more than 20 years of combined experience. We keep testing and delivering knowledge of SEO for the community of SEO.
Leave a Reply