Styled fixed with the flex property

Solution retrospective
I didn't understand how to change the value when the checkbox is checked, any help will be a pleasure
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Nick331102
If the you look at the JS in my pricing.js file for the photosnap project it would be helpful to you and give an idea about how to toggle the value.
https://github.com/Nick331102/Photosnap
Marked as helpful - @pikapikamart
Hey, great work on this one. Desktop layout looks a bit wider on the design but it's fine for now. The two arrows on the slider are missing though. Site is responsive on the other hand and mobile state looks fine.
Nick already gave feedback on this one, just going to add some suggestions as well:
- Avoid using
height: 100vh
on a large container like thebody
as this makes the element's height capped based on the viewport/screen's height. Instead usemin-height: 100vh
so that the element will expand if it needs to. Same goes for the.containerSite
selector. - While changing those
height
I still see that the layout has not been fixed. Then checking some css, you are still usingheight
withvh
units on other elements. Avoid in generalvh
inheight
since it might look good on your end but for others it won't. Try to inspect your layout in dev tools at the bottom and you will see the layout squished. - On this one, instead of
article
useform
tag since this layout requires user to fiddle with theinput
which in the end will submit it so it will be great to useform
on this one. - On your
pageviews
you are using afor
attribute on ap
tag which will not work. You can useoutput
for this one so that you could usefor
attribute on it but make sure it is pointing on the rightid
of theinput
. Right now, it is pointing to theprogressbar
but yourinput
is using:
<input type="range" name="progressBar" class="styleRange" id="slider" value="2" min="1" max="5">
slider
as theid
and theprogressBar
is the name which won't work. Change thefor
into usingslider
. But currently, your pageview does not changes value which won't fire the screen-reader announcement for text-changes for theoutput
.- Your slider
input
right now currently lacks associatedlabel
to it or anaria-label
to which will define the purpose of theinput
element so make sure to add one on it. - Do not remove the
outline
styling. If you did, always include a visual-indicator on the:focus-visible
for those interactive elements like on this one, theinput
elements. Try using tab keys to navigate them, it will be hard to know since there are no indicators. - For the billing selection, since it is a choice , using radio-buttons for those will be really great. A preferred markup on that layout will be something like:
<fieldset> <legend class="sr-only">Select Tip</legend> # this should using sr-only <div> <label for="monthly">monthly billing</label> <input type="radio" name="billing" value="monthly" id="monthly"> </div> ..... </fieldset>
My old solution for this one doesn't use that markup but I have this snippet that uses the same markup only it is dark/light mode toggle
- The start-my-trial-button should have a
type="submit"
on this one since it will submit the form if it was real.
Aside from those, great job again on this one.
Marked as helpful - Avoid using
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