[Best Tip] Fix Your UI Responsiveness Using CSS Container Class

Have you ever noticed your website elements or content spreads on larger screens?

I have seen it a lot on many websites. Whenever I am asked to test a user interface (UI) for its appearance and responsiveness, I inspect the screen size of the website using the browser elements tool.

1. Why do I do this? I want to ensure that the CSS container class is implemented correctly and the UI doesn’t expand on large screen sizes.
2. What will the CSS container class do? It’ll not spoil the look of your website, even on large screens.

This article discusses the importance of CSS container classes and provides solutions to make UIs more responsive.

How Does UI Look Like Without CSS Container Class?

Developers usually ignore the CSS container class. According to my experience, I have observed these mistakes traditionally made by developers who start using CSS frameworks like Bootstrap, Reactstrap, and Material UI directly before learning vanilla CSS properly.

Some developers make these two CSS mistakes:

• First, ignore the container class
• Second, give the parent class width: 80%

These both practices are incorrect because it looks fine on a laptop screen but not on mobile or larger desktop screens.

Let me explain how;

// Example of an 80% width approach
<div className="parent" style={{ width: '80%' }}>
  <div className="child">{/* Content */}</div>
</div>

By using above approach, if the screen gets larger or smaller, we get the responsiveness issue;

1. If a user opens it on larger screen which 2400px wide, it will spread because it’s still 80%, which we don’t want.
2. If a user opens it on a mobile device which is 500px, it’s still 80%, and there is a lot of empty space on both edges.

So, what is the solution? How to fix this??

The Solution: Implement a Responsive CSS Container Class

You can make your UI design responsive and all-width-friendly by using CSS container class.

This simple method will change how your website UI looks on different screen sizes.

// Implementing a responsive container
<div className="container">{/* Content */}</div>

.container {
  width: 100%;
  max-width: 1100px;
  margin: 0px auto;
  padding: 0px 15px;
}

1. Now, our parent class will always be inside 1100px
2. margin: 0 auto; centers the main content of the page
3. padding: 0 15px; ensures the content doesn’t touch both sides of the screen. If your responsive website mixes with the sides, it’ll look bad

Wrapping Up

With the effective implementation of CSS containers, we can make our UI look good for all screen sizes. It also provides a consistent and satisfying user experience.

Try this in your portfolios, blogs, or any other type of website. Let me know if you feel stuck at some point. I’m here to help!

If you want me to fix your React site’s UI and responsiveness issues, you can contact me on LinkedIn.