| Desktop | Mobile |
|---|---|
 |
 |
- HyperText Markup Language
- pure Cascading Style Sheets for visuals
-
CSS clamp for responsive sizing
how to create a range of values that decreases as the viewport gets larger:clamp(75px, 625px - 22.6vw, 300px);
As the viewport width increases, the subtracted value (
22.6vw) grows, which makes the overall result smaller. -
Creating negative values in CSS
In CSS, you can create negative numbers by using thecalc()function. For example:calc(0px - 10px) /* results in -10px */
-
Handling decorative boxes with overflow
At first, I placed decorative boxes inside the<body>and usedposition: absolute. However, when I setbody { overflow: hidden; }, it also clipped the<main>content. The solution was to place the decorative boxes inside<main>instead. Since the boxes are absolutely positioned, they are taken out of normal flow, while<main>still sizes itself based on the content. This way, applyingoverflow: hiddento<main>achieves the desired effect without clipping the actual content. -
Controlling flex container width
In a row flex container with lots of horizontal space, the container will try to stretch and occupy all available width—even if child elements have fixed widths. One way to control this is:- Give children a fixed width.
- Set the desired gap between them.
- Then set the container’s
inline-size(orwidth) tofit-content.
- Github - @AminForouzan
- Frontend Mentor - @AminForouzan