Making a Responsive (Birthday) Card with HTML and CSS
Tags: webdev, css, html, mobile
Published: 2020-12-06 13:04:40

In this tutorial, I will show you how to make a responsive card using just HTML and CSS.

A responsive card is one that looks good on every size screen. We can accomplish this by using `flexbox`, relative heights and widths instead of absolute measurements, and also `@media` rules to define CSS properties to take effect only on specific screen sizes.

{% youtube BVX7kZ4GM-g %}

### The HTML

Here we have a simple card. Inside, we have an image and some text.

```html
<div class="card">
    <img src="./birthday.svg" alt="birthday" class="birthday">
    <div class="text">
      <h1>Happy Birthday!</h1>
      <p>I hope you have a wonderful birthday</p>
      <p>- Jonah Lawrence</p>
    </div>
  </div>
```

### Relative Sizes and Flexbox

Here I have set the height to `85vh` (85% of the viewport height) and the width to `80vw` (80% of the viewport width). Using relative measurements like this instead of absolute measurements (ex. 800px) allows you to have elements that stretch and shrink depending on how large the screen is.

Using flexbox, we can spread the elements in the card across the height or width. We can also use this to center them vertically and horizontally. I recommend checking out [Flexbox Froggy](https://flexboxfroggy.com/) by Codepip for an interactive way to understand how flexboxes work.

By default, the flex direction is `row` (left to right), but you can overwrite this by using `flex-direction: column` (top to bottom). Now our image appears on top and the text appears on the bottom.

```css
.card {
  height: 85vh;
  width: 80vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607258435517/QLBRW-O0K.png)

### `@media` Rules

When the screen is at least 1000px wide, we don't need to keep the image on top anymore, we can put it side by side with the text.

Using a `@media` rule like the one below, when the screen is a minimum width of 1000px, the `flex-direction: row-reverse` will be applied to `.card` causing the flexbox to place items right to left (the image on the right and the text on the left.

```css
@media only screen and (min-width: 1000px) {
  .card {
    flex-direction: row-reverse;
  }
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607258457890/GTcwCFPZN.png)

On very short devices such as phones in landscape, we may want to use this landscape layout as well, so we can use the following rule using `max-height`.

The CSS properties inside this rule will only take effect on screens with a maximum height of 640px.

```css
@media only screen and (max-height: 640px) {
  .card {
    flex-direction: row-reverse;
  }
}
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1607258722812/-LHpRCOAo.png)

### Demo

Try running the demo in [**full page view**](https://codepen.io/eyl327/full/yLaOjqV) to see the effects.

Resize the viewport to switch from portrait view to landscape view.

{% codepen https://codepen.io/eyl327/pen/yLaOjqV default-tab=css %}

### Watch the full tutorial

In [this video](https://youtu.be/BVX7kZ4GM-g), I walk through the full process of creating this demo from scratch.

For a full understanding of how I designed this responsive birthday card, be sure to check it out!

### About me

My name is Jonah Lawrence and I am a full stack developer.

You can find me on:

YouTube 📺 https://www.youtube.com/DevProTips

Twitter ✍ https://twitter.com/DenverCoder1

Github 👨‍💻 https://github.com/DenverCoder1

If you like my content, be sure to react, like, and subscribe to my channel!