How do I make the text responsive?

1

funny-post-it

When I resize the browser, the text overlaps and comes out of the post-it square.

2

@Yr2091

The text size can be set with a vw unit, which means the “viewport width”.

Example

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>

Try that and see if that works.

3

Hey thank for the response, but it still doesn’t work. I resize and the text leaves the square.

4

postit

5

@Yr2091

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

You wrote “stype” instead of “style”

1 Like
6

Thanks man, I was applying the vm to every single div, each with its own vm value, I had to select all at once and then apply the 1.3vm and it works like I wanted it. Thanks again!

7

@Yr2091

Glad to hear it worked !

Anytime !

8

You can even put this line in html

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
1 Like
9

I was looking into your css code and i saw you have a lot of duplicate code like:

.lightpink {
  width: 20%;
  height: 10em;
  background: rgb(255,126,185);
  float: left;
  box-shadow: -4px 4px 2px rgba(32, 32, 32, 0.5);
}
.pink {
  width: 20%;
  height: 10em;
  margin-left: 8px;
  background: rgb(255,101,163);
  float: left;
  box-shadow: -4px 4px 2px rgba(32, 32, 32, 0.5);
}
.lightblue {
  width: 19%;
  height: 10em;
  margin-left: 8px;
  background: rgb(122,252,255);
  float: left;
  box-shadow: -4px 4px 2px rgba(32, 32, 32, 0.5);
}

etc.
As you can see the diff between your classes lightpink, pink, lightblue, etc its only the background-color. Why don’t you try to make your code DRY(“Do not repeat yourself”).

I would say, you can define one class like:

.post-it {
  width: 20%;
  height: 10em;
  margin-left: 8px;
  box-shadow: -4px 4px 2px rgba(32, 32, 32, 0.5);

for the post-it design and classes like:

.bg-pink {
 background: pink;
}

etc… for the background colors.

In html then you may use these classes like <div class="post-it bg-pink"><p>content</p></div>.
The same principle you may use to style your paragraphs inside post-it notes.

I intentionally left out the float: left; because it has nothing to do with the design of the post-it. Its just a positioning attribute. In some cases maybe you don’t want them all to float that way, maybe you want them to float right.

Good luck and happy coding.

1 Like
10

Thank you, I realized it and will work on it to make it DRY. Great catch! update: a lot better thanks to you: https://codepen.io/nelj3196/pen/JZYOZd

1 Like