Submitted 2 months ago

03 - Social links profile

#accessibility

Hassan Aziz•60

@bauerceptor

Preview site View code

This is a solution for...Social links profile

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

It was quick this time around. I would like to use SASS next time.

What challenges did you encounter, and how did you overcome them?

It was a smooth experience overall, nothing was particularly challenging. It was same as last challenge with minor changes.

What specific areas of your project would you like help with?

I thought vh, vw, and % are responsive units. I used them to dictate the width and height of the container. But on smaller screen sizes, everything broke so I switched width and height to use 'rem', which surprisingly, made everything responsive automatically and nothing broke on smaller screen sizes as well.

I don't know how, when and where to use vh, vw and %, and would appreciate some help in understanding these units better.

Danke

Community feedback

EDWINTOAPANTA02•120
@EDWINTOAPANTA02Posted 2 months ago
(Viewport Height) What does it mean? It represents a percentage of the height of the viewport (the visible browser window).

100vh = Full height of the viewport. 50vh = Half of the height of the viewport. What does it mean? It represents a percentage of the width of the viewport (the visible browser window).

100vw = Full width of the viewport. 50vw = Half of the width of the viewport. When to use it?

When you want an element to dynamically adjust to the width of the screen. Very useful for elements like images, containers, and fluid typography. What does it mean? The percentage is always relative to the immediate parent container.

width: 50%; means that the element will take up 50% of the width of its container. height: 100%; means that the element will take up the full height of its container. When to use it?

For elements that need to adapt to the size of their container (parent). It is ideal when working with flexible and grid layouts.
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord