CSS – making your site responsive

Understanding responsive layouts

In our previous article, we added CSS styles to our markup to make it look like a website. It’s plain and simple website that works when viewed on a desktop computer. Unfortunately, it is not responsive and will not look good on mobile devices.

Based on this site, about 52.2% of the website’s traffic comes from mobile phones. In order to optimize our webpage for mobile viewing, we need to make our site responsive.

 

How can we make it mobile friendly?

In order to make our site fluid, we need to make use of percentages for widths instead of fixed values and use media queries. Currently, our webpage has fixed width thus it’s not adapting to smaller screens.

 

What are media queries?

A media query is a CSS technique that uses @media rule that includes a block of style and applies its changes if a certain condition is met. This utilizes breakpoints in our webpage’s width.

 

What are breakpoints?

These are the specific point where media queries will respond based on the screen sizes.

h1 {
	font-size: 34px;
}

@media only screen and (max-width: 400px) {
	h1 {
		font-size: 24px;
	}
}

In the above example, you can see that on a desktop screen the h1 has a font size of 34px. When the screen reaches the 400px breakpoint, it will make the h1 font size into 24px. You can add multiple styles inside a media query and also different media query for different breakpoints.

 

Conculsion

It is important to make your website responsive in order for it to adapt to mobile screens. Depending on the design, you can add different breakpoints in order to make it look good on diffent browsers. There’s are tons of breakpoints for different devices, but its up to you to use it depending on your website’s content.

Responses

17 + 16 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.