5 Simple Tips for Making Responsive Layouts

Introduction

You've done all the hard work to create a really cool layout, but then you make your browser window just a little bit smaller and suddenly you find something overflowing. You might let out a sigh, throw in a media query, and fix it. Then you adjust your browser window a bit more to test things out and find some text that's too big for small screens. You curse to yourself a little bit, start working on that, and eventually solve the problem. But then you decide to try it in portrait mode and things fall apart again, making you feel like throwing your computer out the window.

Luckily for us, we now have many modern CSS solutions that make it much easier than it used to be. In this blog, I'll give you five tips to take the headache out of making responsive websites.

Right Mindset

Before you write a single line of CSS, remember that your website is already responsive. The layout will work on both large and small screens, although it might not be pretty or easy to read on really big screens.

Understanding and embracing this natural responsiveness can help you write better CSS. When you run into issues, it's important to remember that it's the CSS you wrote causing the problem. If it works at one screen size but breaks at another, you might need to take a different approach.

Start with Global Styling

Start by writing global styles first, such as typography, colors, and backgrounds. This approach will get your site pretty far along without worrying about the layout. The mobile layout won't be perfect, but it won't be terrible either. For example, setting simple colors, backgrounds, and padding for sections can make a simple site functional and provide a good foundation for more complex sites.

Avoid Fixed Sizes

When you start thinking about layout, avoid using fixed sizes like width: 1000px or height: 500px. Fixed sizes will only cause problems. For example, if you set a container width to 600px, it might look fine on large screens but will overflow on smaller screens. Instead, use max-width to allow the container to shrink as needed but still limit its maximum size.

Similarly, avoid setting fixed heights. Fixed heights can cause content overflow issues as the viewport size changes. Instead, use min-height to ensure the container can grow as needed to accommodate more content. For example, setting a min-height of 300px allows the container to expand if the content grows, preventing overflow issues.

Use Media Queries to Add Complexity

When using media queries, try to add complexity rather than overriding existing styles. For example, instead of setting up your columns for large screens first and then overriding them for smaller screens, start with a mobile-first approach. Set up your basic styles and then add complexity for larger screens.

Here’s an example:

.container {
  display: flex;
  gap: 1em;
}

/* Add complexity for smaller screens */
@media (max-width: 40em) {
  .container {
    display: block;
  }
}

/* Add complexity for larger screens */
@media (min-width: 40em) {
  .container {
    display: flex;
    gap: 1em;
  }
}

This approach minimizes the need for overrides and keeps your CSS simpler and easier to maintain.

Take Advantage of Modern CSS

Modern CSS offers many tools that can help you create responsive layouts without relying heavily on media queries. For example, the clamp() function allows you to set a range for font sizes that adapts to the viewport size:

h1 {
  font-size: clamp(2rem, 4vw, 5rem);
}

This means the font size will be between 2rem and 5rem, depending on the viewport width. Similarly, you can use min() and max() functions to set adaptable sizes for padding, margins, and other properties.

Another modern CSS feature is flexbox and grid, which allow for flexible and responsive layouts without the need for complex media queries. For example, using grid-template-areas, you can easily rearrange content for different screen sizes.

Conclusion

By adopting the right mindset, avoiding fixed sizes, using media queries to add complexity, and taking advantage of modern CSS, you can significantly improve your approach to responsive web design. These tips will help you create more flexible, adaptable layouts that work well across different devices and screen sizes.