@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::beforeselector, this will be your base property that is inside the mobile workflow. Then you could just remove allwidthdeclaration on yourmediaqueries related to thewidthof the selector. For theheightyou can just use theclampfunction on it as well. Make sure that you know the properties on theclamp. First argument isminimumsecond ispreferredlast ismaximum. What will really help you to graspedclampis that, first, add theminandmaxof the property that you want, anypreferredsize 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
divis not really an graphic content.svgsfigureimgthose 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!
