Building Responsive CSS

Recommended for those who understand the basics of HTML and CSS.

I will be writing about the basics of responsive CSS. I will go over some HTML so this is for those who have understood what HTML is. I have written this blogpost because many people seem to have trouble resizing for smaller screens when starting out in web development. Nowadays, there are so many different screen sizes from different devices that it’s hard to say which styling looks better with which. However, if you read through the blog, I think you will get a brief understanding of how to change using newer CSS techniques.

What exactly is CSS?

Before we understand CSS, we must understand HTML. HTML stands for a hypertext markup language. HTML is the content of the web, the words, the paragraphs, the links, etc. It is described as a series of elements and it tells the browser how to display objects. For example, this current paragraph you’re reading is a <p> tag. There are hundreds of HTML tags but you don’t need to memorize each one to understand HTML.

W3Schools is a free, online resource that helps teach beginners about tags. All of the HTML tags are shown below.

HTML Reference

Back to the main topic, CSS stands for cascading style sheets and is used in conjunction with HTML. CSS simply stylizes HTML. Without CSS, the web would look entirely like a Microsoft word document.

What does it mean to be responsive?

By having a responsive website, it doesn’t mean it responds to your action. Rather, it means that the page will be displayed differently based on the dimensions of the device you’re viewing it on or the size of the page. If the design stayed the same throughout all of the interfaces, it would be hard for the audience to engage with.

The design on the right is an example of less intense non-responsive styling. There are cases where the unresponsiveness overlaps elements and is an egregious crime against design. Responsiveness of a website allows for the site to be more accessible to people with different screen sizes.

How do you build a responsive site?

Well, there are many solutions to unresponsiveness but today I will be talking about the easiest few ways and hopefully, we can combat design crimes across the world wide web.

CSS Syntax

The picture above shows a selector which is the HTML tag you wish to style, a property, and a value. The property is what about the selector you wish to style and the value is what it will be styled as.

Don’t forget about Padding, Borders, and Margins

For this, you can just imagine an invisible halo around your object. Although it might not be visible at times, the bottom diagram shows that outside of your selectors is a cushion of space that prevents other ts to touch it. This can be overridden however by other specifications in styling and design. But for the purpose of this blog, we can maintain that there’s a cushion of air around the content that can be styled.

Keep in mind, if you include a definite unit, it will style it to be that unit. So for example, If you use 600px as the value of an image’s width when the screen is less than 600px, the image will be cut off short because it is bigger than the screen. That’s based only on the image itself and not accounting for the padding or the margins and borders of the image.

What is the viewport?

This is super important to responsive design!

In html5, the viewport was added. When using viewport, every 1 unit is equivalent to 1% of the screen.

In this example, the frame will always be 50% of the media or 1/2 of the total screen size. That way, even when the screen is small, the content will adapt to its size. You can use it on the content’s padding, margin, border, etc…

Use percentages for responsive design

When using percentages for values, it’s similar to viewport because it’s flexible. the percentages are based on the size of its parent node. The parent node is the HTML tag/selector that it’s directly wrapped inside.

Max, min, clamp

Very important!

Max takes the larger alternative, min takes the smaller alternative, and clamp has three but prefers to maintain the center value in the parentheses.

When 50% of the viewport is larger than 400px. The smaller is preferred so the div width is 400px.

50% of the parent is smaller than 400px. The smaller is preferred so the div width is 325px.

50% of the parent is larger than 400px. The larger is preferred so the div width is 450px or 50% of the parent.

50% of the parent is smaller than 400px. The larger is preferred so the div width is 400px.

Visit the following link for a demonstration on code pen:

Here are some helpful youtube videos and resources!

min(), max(), and clamp(): three logical CSS functions to use today

Introduction To Responsive Web Design — HTML & CSS Tutorial

Thank you, and happy coding everyone!