Height

why height: 50% is not working?

need to do following first: body { height: 100vh; }

what is vh?

Viewport-percentage Height, also , we have vw, vmin, vmax vh unit, equal to 1% of the height of initial containing block. or use height: 50vh, it is working! They are working well elegantly!

The problems with viewport units

vh, vw work well in laptop, but not in some mobile. This depond on mobile OS and browser. Now dvh, svh, lvh are designed for this issue.

I want the App cover whole screen, not less, not more. Using vw, vh can make it work like that. But in the App page, there are up and down two parts, which using flex and flex grow. When the size of the items inside which using 100% height becoming bigger, then the whold app page becoming bigger than the screen. How to fix it?

Show button on hover only

When hover a todo item, then show the delete button:

.hover_button {
  display: none;
}
label:hover + .hover_button, .hover_button:hover {
  display: inline-block;
}

HTML:

<li >
  <label>
    this is the todo item
  </label>
  <button className=" hover_button">Del</button>
</li>

By doing this, we’re using the adjacent sibling css selector +. The selector is pretty simple: on label “hovering”, you select .hover_button (its sibling) and display it. Here, I added .hover_button:hover so that when the user “hovers” the button, it keeps it visible (prevent a blinking effect as the user moves the mouse over the button).

Using CSS framework

tailwindcss

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

Achieving Fluid Typography with clamp()

One of the most common use cases for clamp() is fluid typography. It allows us to create responsive text that scales proportionally based on the viewport size. By defining minimum and maximum font sizes, we can ensure readability while adapting to different screen sizes.

Let’s consider an example where we want the font size to scale between 16 pixels and 24 pixels, with a preferred size of 3 viewport width units:

font-size: clamp(16px, 3vw, 24px);

In this scenario, the browser will adjust the font size dynamically based on the available space, striving to maintain the preferred size of 3vw. If the viewport becomes narrower, the font size will decrease, but it will never go below 16 pixels. Similarly, if the viewport expands, the font size will increase, but it will never exceed 24 pixels.