Mobile Responsive Design — For Dummies
I’ve got to admit it, building a website from scratch that is mobile responsive can be quite a learning curve in the beginning.
Of course, it’s important to plan the layout before you even begin writing HTML but sometimes you can hit a snag on certain sections that won’t respond the same way as others, especially on larger pages.
Mobile responsiveness is achieved through combining 2 things; Flex/Grid and div tags. The div tags are used as containers and wrappers to set the bounds for the content we want responding to the view width (flex/grid).
First, take a moment to visually understand what is built here. We have a div.container that is spreading across the width of the view port using a width: 100vw; rule. Inside of that is a div.wrapper that is fixed to stay in the middle of the container via a margin: 0 auto; rule. With the wrapper having a set width based on the size of the container, I am able to flex the contents of the wrapper to 100% width (100% of its parent container a.k.a. the wrapper).
Get Saxton Grey Vasquez’s stories in your inbox
Join Medium for free to get updates from this writer.
Now, let’s take a moment to understand the code and how it may react to a change in view width.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Responsiveness</title>
<style>
* {
box-sizing: border-box;
}
.container {
background-color: rgb(187, 224, 224);
padding: 50px;
width: 100vw;
}
.wrapper {
background-color: rgb(103, 167, 167);
margin: 0 auto;
}
.wrapper h1 {
color: rgb(161, 72, 72);
}
.wrapper ul {
background-color: aliceblue;
display: flex;
gap: 15vw;
width: 100%;
align-items: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Container</h1>
<div class="wrapper">
<h1>Wrapper</h1>
<ul>
<h3>Flex List</h3>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div>
</div>
</body>
</html>Notice that the unordered list has a gap that is set to 15vw meaning that the gap will shrink/grow along with the view port. This allows the ul to stay at its maximum width as the screen shrinks without having to make any size changes or use media queries.
The styling clearly isn’t perfect here but you get the idea. The screen width shrunk down so the flex gap acted accordingly and is staying within it’s wrapper. Without utilizing a wrapper I would have had to set max/min widths and heights for the ul and unwanted changes to the layout would occur as the screen width changes.
The same result could be achieved using the grid layout as well. In that case, I would create a set width for the wrapper using vw and I would set the ul to have a display of grid with 1 row set to the size of 1fr, taking up all the available space. If the list were to be vertically aligned, the grid would require a column set to 1fr width and the desired layout would be there.
As your page gets larger and filled with more content, you will most likely have multiple wrappers within the same container. However, the same basic concept applies. Utilizing containers, wrappers, flex/grid, and %/vw values can save you hours of work as you design the website to be mobile responsive so I would highly recommend taking the time to understand the basics.
