Designing a website that looks great on all devices can be difficult, especially when it comes to creating responsive containers. These containers are layout elements that adjust their size and position based on the device's screen size, ensuring that the website looks good on any device, from a large desktop to a small mobile phone. However, writing CSS media queries to achieve this can be intimidating. Fortunately, with just a few CSS properties, you can easily make any container responsive, whether it contains text, images, or videos.
This tutorial will guide you through creating responsive containers for your website, allowing your content to look great on any device. Whether you're a beginner or an experienced web developer, this tutorial will give you the necessary knowledge to design responsive web layouts that are visually appealing.
Single Containers
Let's take a look at how you can make a single container responsive, whether it contains text, an image, or a video.
Step 1: Create a container
No matter which technology you are using - pure HTML, React, Angular, or Vue - you will need a container element such as <div> or <section>. This tutorial will focus on using the <div> container element. Create a div element with a class of 'container'.
<div class="container"></div>
Let's have some text within the container...
<div class="container">Write 50 - 100 words here</div>
Step 2: Styling the container and making it responsive
Select the container in your CSS file using its class name. Give it a background-color of your choice, and text color of your choice, and some padding if you wish to.
Responsiveness
By default, a div container like this would occupy 100% width of any screen, but let's say you want to give it a defined width, you'd want that container to automatically adjust to any screen size, right? You can do that without writing media queries.
First, give it a width of 100%, then set max-width to the requirement of your project. Here, we will go with 700px...
.container {
width: 100%;
max-width: 700px;
}
You can center the container using margin: auto; if it is required in your project.
Using the developer tools in your browser, you can adjust the viewport of your screen to see the responsiveness of the container. Make sure to fine-tune the max-width to your project's requirement.
Why 'max-width'?
In responsive design, the max-width property is used to set the maximum width of an element on a webpage. This means that if the viewport or device width is less than the set max-width, the element will shrink to fit within the available space. However, if the viewport width is larger than the max-width, the element will not stretch beyond the specified width.
If you only use max-width without width: 100%;, the container may only stretch to fit the content within it and not the full width of your requirement. Therefore, you need to include width: 100%; to ensure that the container expands to fill the entire width of the screen while still adhering to the max-width limit you set.
Minimum height (min-height)
When creating containers with a fixed width, it may be necessary to specify a height for them in your project. However, if you're taking the desktop-first approach, setting a fixed height could cause the container's content to spill over on smaller devices. In other words, if you set a fixed height for a container, it may not adjust well to smaller screens, and the content inside the container could overflow or become distorted. Therefore, it's essential to keep in mind the responsiveness of your design and consider using the min-height property instead.
Suppose you have a container containing text with a set width and maximum width, and you want to give it a specific height of 200px. In that case, you should use the "min-height" property to set the height. This property ensures that the container's height won't be smaller than the specified value, but it can expand beyond that height to accommodate the content inside it. This way, you can keep your design consistent while allowing flexibility for different amounts of text or varying screen sizes.
Example
.container {
width: 100%;
max-width: 600px;
min-height: 200px;
}
Flexbox display
Flexbox is a powerful layout mode in CSS for creating dynamic and responsive user interfaces. It allows developers to easily arrange, align, and distribute elements/containers on a web page. Let's explore its fundamental concepts and how we can apply various flexbox properties to create a responsive layout.
When you have multiple containers on your page that you want to align side to side, you can make use of some flexbox properties in combination with the responsive width and height properties we talked about in the earlier part of this article.
As a case study, we will be working with a single-parent container and three-child containers...
<div class="parent-container">
<div class="child-container">A</div>
<div class="child-container">B</div>
<div class="child-container">C</div>
</div>
Give the child container a defined width and height, following the earlier principles we talked about.
Also, apply a background-color of your choice so that we can differentiate them from the default background of the body of the page.
.child-container {
width: 100%;
max-width: 350px;
min-height: 300px;
background: dodgerblue;
}
This is what we currently have.
To make the child containers align side to side while maintaining responsiveness, you can make use of the following flexbox properties on the parent-container...
.parent-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
align-items: center;
}
This is the result below:
What does each property in the parent-container do?
display: flex;: This property defines a flex container for the element, enabling flexible layout options for its children.
flex-wrap: wrap;: This property controls whether the flex items should wrap or not when they reach the end of the container. In this case, wrap means that items will wrap to a new line when they reach the end of the container.
gap: 20px;: This property sets the spacing between flex items. It is shorthand for the row-gap and column-gap properties, which are used to define the spacing between rows and columns respectively.
justify-content: center;: This property aligns the flex items along the main axis (horizontal axis in this case) and centers them within the flex container.
align-items: center;: This property aligns the flex items along the cross axis (vertical axis in this case) and centers them within the flex container.
Complete CSS Code
In conclusion, implementing these properties can simplify the process of creating responsive containers. Rather than writing neck-breaking media queries, you can leverage these properties to create flexible layouts that adapt to various screen sizes and devices.
If you are a beginner, you need to have it at the back of your mind that this tutorial only serves as a guideline to responsive web design. Always tweak the max-width and min-height of your containers to the requirement of your project.
Top comments (0)