Easy Responsive Websites

Think in Boxes

HTML is structured using the BoxModel where everything’s a box, with height, width, padding, and margins. Every element represents a box. Our job is to manipulate their properties to make our website responsive.

This doc is based on the advice found in Sajid’s video with the same title. His example’s code pen can be found here.

The properties

The main CSS properties in question are:

• display
• padding
• position
• margin

Display

This property has several values each with a behavior.

1. none: obvious
2. inline: makes elements stay in the line and take space as needed’
3. block: is default for most elements, and they take all available space.
4. flex: read about it here Flex Box
5. grid: read about it here CSS Grid display // I don't like this one

Dealing with Flex boxes

Adjust the grow, shrink, and basis values along with the alignment and direction to achieve responsiveness.

.child-boxes{
	/*
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
	*/
	flex: 1 1 auto;
}

Dealing with Grids

Set the parent, then adjust the fraction values for the columns. Can also consider repeat functions and controlling specific child elements too. Example:

.parent{
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr 2fr; /* Tells it to make 2 columns, the latter taking 2/3 of space*/
	repeat(auto-fill, minmax(200px, 1fr));
}

Media Queries

This is what it boils down to when responsive flex box isn’t enough. #MediaQueries allow us to apply specific styles based on a specific condition, such as the viewport’s size.

@media (max-width: 50rem){
	...
	...
}

Positioning Elements

The position property controls how an element is displayed and how it flows in the HTML structure. There’s five possible values:

1. static
2. relative
3. sticky
4. absolute
5. fixed

static is the normal and default value.

Relative

Similar to static but unlocks four more properties to control position: top, right, bottom, and left.

Absolute

Completely remove the box from normal flow but allows us to assign any non-static value to the parent.

Fixed

No parent needed, can position fixed to the viewport and don’t move on scroll.

Sticky

Stays in the document flow normally BUT then sticks to the position assigned and sits there, similar to fixed.