@pikapikamart
Posted
Hi, great work on this one. Both desktop and mobile layout is good.
Regarding your question:
- You can make the background fluid, like what you said, using clamp. I primarily use clamp to make media query-less layout in some projects. Try applying this one
width: clamp(25rem, 46vw, 36.875rem);
on yourbody::before
selector, this will be your base property that is inside the mobile workflow. Then you could just remove allwidth
declaration on yourmedia
queries related to thewidth
of the selector. For theheight
you can just use theclamp
function on it as well. Make sure that you know the properties on theclamp
. First argument isminimum
second ispreferred
last ismaximum
. What will really help you to graspedclamp
is that, first, add themin
andmax
of the property that you want, anypreferred
size could be use as well. Example:
width: clamp(10rem, 3vw, 37rem);
10rem is my minimum, 37rem is my maximum. My size will only grow or shrink base on my 3vw declaration.
Then what you should do, adjust your screen, go to your maximum size, for example, 1600px, then tinker on the preferred size, adjust it until you reached the maximum size. Example:
width: clamp(10rem, 23vw, 37rem);
I achieved my 37rem with my 23vw, after this, your layout will be fluid and you don't need any media queries. You can use clamp with font-sizes as well to avoid any media queries.
If you are confused on this one, you can message me in slack and I can help with it.
- You don't really need aria-hidden on this one since
div
is not really an graphic content.svgs
figure
img
those are the ones.
For animations, well, if you treat the phone as like a interactive element, you can maybe add like hover on the button like-ish, on the inputs, on the dots. Just micro interactions with those.
Other than that, good job.
Marked as helpful
@vanzasetia
Posted
@pikamart Thanks for your valuable feedback and your explanation about clamp
, it really helps me understand better about it! I will try to use that clamp
function as soon as possible!
I used aria-hidden
to prevent the screenreader to read the chat on the illustration 😅.
@vanzasetia
Posted
@pikamart I take a look at your profile at Frontend Mentor, then I see your slack name is Raymart Pamplona , but I only find Raymart (with girl using batman custom as a profile photo) on the slack. Is Raymart, you?
Anyway, the solution has been updated. Can you give your opinion about the clamp()
that I used for those backgrounds?
@pikapikamart
Posted
@vanzasetia that's a boy...that's me... hahahahha. but yes, that's my slack
on the ::after
your vw
is too much, I tried about 25vw
and it works properly, it gets the minimum for mobile, and gets the maximum on a 1440px. This is on the width, for the height, I haven't tested it.
Marked as helpful
@vanzasetia
Posted
@pikamart Oops... my bad 😅. Thanks for checking it!