DevPush

How to make a website layout responsive for mobile phones and tablets

Introduction

When working on a website you develop it on a desktop PC or laptop making sure that the website layout is correct. During development of the website or after completion it's expected to make sure that the website's layout works with small and medium-sized screens found on mobile phones and tablets.

This guide will show you how to get a website with a layout that currently only fits a desktop or laptop-sized screen and adjust the layout so it's mobile responsive when the website is viewed on most mobile phones and tablets.

CSS Media queries using the width

To make a website mobile responsive you will need to make use of a CSS feature called media queries. Media queries are CSS properties that are used to apply specific CSS when a specific condition is met.

Media queries have many features, for mobile responsiveness you only really need the width media feature so that is what will be focused on.

You use @media to start the query and then add within brackets the media feature and value such as width and 500px.

So what the code below does is if the website width is equal to 500 pixels then the blue color will be applied to all text that is within <p> tags.

@media (width: 500px) {
  p {
    color: blue;
  }
}

This example uses max-width: 1000px which means if the width is less than or equal to 1000 pixels then the blue color is applied to text within <p> tags.

@media (max-width: 1000px) {
  p {
    color: blue;
  }
}

This block does the same as the example above except you use width and the <= symbol. Personally, this should be the standard way to write the condition as I find this one easier to understand.

@media (max-width <= 1000px) {
  p {
    color: blue;
  }
}

The opposite can be done where it's more than or equal to check using the min-width.

@media (min-width: 200px) {
  p {
    color: blue;
  }
}

This is the alternative syntax for the min-width example above.

@media (width >= 250px) {
  p {
    color: blue;
  }
}

From those examples, that's pretty much all you need to know in terms of using media queries to make the website responsive.

Using a mobile view in Chrome developer tools

The Google Chrome web browser includes some developer tools to allow you to test how websites look in the view of some mobile phones.

The reason why Google Chrome is preferred over Microsoft Edge is because Google Chrome is the more popular web browser and therefore should be the main browser you use to build your website.

Open up the Google Chrome web browser and go to a popular website, this guide will use the Microsoft website as an example.

Right-click on the website, and in the pop-up menu click the Inspect option.

Google Chrome developer tools will show up at the bottom of the browser window.

To access the device mode for the developer tools locate and click the laptop / mobile icon which is the second button

Above the website, a new bar will appear showing options to customize the device mode.

The Dimensions option is set to Responsive, this option allows you to set the website width and height. Changing it from 1480x1350 to 360x800 for example will apply the changed width and height to the website and the Microsoft website will have its mobile view which shows all website content in for a smaller screen.

Click on the Dimensions menu to change the option, a list of different devices shows up where each device will use the same width and height as used on the actual device.

So for example selecting the iPhone SE option will set the width to 375 pixels and height to 667 pixels which will be the same width and height when viewing the website on the actual iPhone SE.

There are options for a few tablets so selecting iPad Pro will show a much bigger width and height but still lower than standard desktop/laptop screen sizes.

Clicking the rotate icon with the phone icon with the two arrows allows you to switch from portrait to landscape view and vice versa.

That was an overview of the device mode feature in Chrome developer tools, everything that was gone through is all that is needed to test out your websites in mobile view while developing your website.

Editing a website to be mobile-responsive

The example website used will be the following website found at https://devsites.devpushprojects.com. The screenshot below shows how the website looks.

As there is no mobile responsive code added to the website currently so when it's viewed on an iPhone for example it will look like the following...

As you can see there are a few problems with this website such as the blocks are cut off on the right and you have to scroll both ways to see all the images and names.

Also, the title, description, and sites are against the left side when there should be some spacing, this doesn't require media queries either CSS margin or padding.

Applying the media queries to this website will resolve the issues.

To begin go to the devsites repository, you can get the code by downloading and extracting the zip.

You can also use git in the terminal by using the git clone command to get the files.

git clone https://github.com/devpushprojects/devsites.git

After you have retrieved the code double click the index.html file to load the website in the browser.

Resize the browser window and you will see that the content is being cut off and there is no responsiveness when changing the width size.

Open up the file style.css inside of the styles folder in a text editor and you should see the following CSS code.

html, body {
  font-family: ui-sans-serif, system-ui, sans-serif;
}

body {
  margin: 0;
}

a {
  color: #000;
  text-decoration: none;
}

header {
  padding: 5px 0 40px;
}

main {
  display: flex;
}

header,
main {
  width: 1200px;
  margin: 0 auto;
}

h1 {
  font-weight: 800;
}

img {
  width: 238px;
  height: 149px;
}

.sites {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 40px 20px;
  width: 1000px;
  justify-items: start;
}

.site {
  width: 238px;
  padding: 24px;
  border-radius: 5px;
  border: 1px solid #D1D5DB;
  background-color: #F8FAFC;
  box-shadow: 2px 2px 8px 1px #DDD;
}

.site-name {
  margin-top: 10px;
  font-weight: bold;
}

.categories {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.category-links {
  display: flex;
  flex-direction: column;
}

.category {
  display: inline-block;
  margin-bottom: 20px;
}

.category:hover {
  cursor: pointer;
  text-decoration: underline; 
}

Add the following code at the end of the code inside of the style.css file and save the changes to the file.

@media (width <= 1280px) {
  .sites {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    max-width: 1000px;
    justify-items: center;
  }

  .site {
    width: 350px;
  }

  img {
    width: 100%;
    height: auto;
  }
}

To summarize the new CSS code added when the width is equal to or less than 1280 pixels then the columns switch from three to two, the items are aligned in the center and the item size increases as there is more space available.

Change the width of the website to under 1280 pixels and you will see the layout change.

Going back to the style.css file add the following block of code at the end of the file which is much simpler as it's just changing the item width.

@media (width <= 1150px) {
  .site {
    width: 260px;
  }
}

Adjust the width to see the next change when the website width is 1150 pixels or under.

The next block will apply changes to a width of 950 pixels or lower. The change applied will be the column switching from two to one and the item width increases to use up all the available space.

@media (width <= 950px) {
  .sites {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 1000px;
  }

  .site {
    width: auto;
  }
}

Adjust the width to see the next change.

This change will move the categories above the website items, the reason is so that the website images are still clear to users as the screen will be small.

@media (width <= 850px) {
  main {
    flex-direction: column-reverse;
  }

  .categories {
    padding: 0 0 40px 0;
  }
}

This time the Dimensions was changed to iPhone SE as it has a really low width setting and the new change shows all the content as expected without issues.

Exit out of device mode and try dragging the edge of the actual web browser window and as you decrease the width the layout will shift through all the media queries showing each layout that's been set up.

You can find the finished code from the following GitHub repository which can be set up the same way as the starter code.

Conclusion

This guide introduced you to programming websites with mobile phones and tablets in mind as it's nowadays a requirement to have websites viewable on those devices.

Media queries are the CSS feature that you should use whenever you want to make websites mobile responsive, also use the device mode in Google Chrome developer tools to show you how websites look in various device screen resolutions or setting a custom screen resolution.

The devsites website example has shown you how to add media queries and the type of CSS changes you need to HTML elements in the website.

There are plenty of web technologies that use mobile-specific features so take this guide as an introduction to developing for mobile phones and tablets.