-
The breakpoint for switching grid is too high, but 3 columns were not fitting below that. There must be a 2 column layout present in the middle. What's the recommendation?
-
Font size also has to be reduced when moving to the desktop version. What's a simpler way to handle the font-size switch?
Stephane Baroux
@steppan26All comments
- @atulanand206Submitted over 3 years ago@steppan26Posted over 3 years ago
Great work, it looks good; however your titles are all on the small size (the titles on the cards AND the main title of the page). A nice simple fix it would seem :-) Good luck with your future endeavours.
0 - @FlexAgrumeSubmitted over 3 years ago
Hi!
This challenge was an opportunity to discover :
- The HTML Details Element
- The scrollbar-width property in CSS
- How to custom scrollbars in Webkit (e.g. ::-webkit-scrollbar)
- How to select an element based on the presence of a given attribute
Any feedback is welcome.
Have a nice day!
@steppan26Posted over 3 years agoHi @FlexAgrume,
Great work on the project , it looks really good and functions well. I recently did this challenge too and really enjoyed it. One small piece of feedback on your drop-down menus (love how you've animated the rotation of the arrows btw), when in desktop view I can open them all up at the same time which causes the lower text to disappear. I would consider either allowing the 'card' to expand with the text, or alternatively to use my solution which was to use JS to force all drop-menus to close before applying the 'open' function (hope that makes sense).
1 - @tabetommySubmitted over 3 years ago
I had difficulties writing the code for IE11, as a result the grid and Flexbox elements were all scrambled. Any solutions for IE11 please?
@steppan26Posted over 3 years agoHi @tabetommy, it loos good from the preview window but clearly the sizing and spacing is a bit off as your image is shorter than the design. I am new to web dev, so I am not in a place to realistically critique your code, but I would for sure work on the things brought up in the report (Accessibility issues and HTML issues), you'll find that adding an 'alt' tag to all your images will resolve a large portion of those too.
As for the colour scheme, I have noticed that sometimes the ones provided are a little off from the design, but there's a bunch of sites out there which will let you grab the colour from an image (try something like https://coolors.co) so you can get it right.
Keep going and good luck with the future.
0 - @Comet466Submitted over 3 years ago
Hi, just completed this challenge let me know what you think, i think it hits pretty close to the mark, would love to hear a better way to make the JS part of the code, i feel like a repeated myself a little too much (against the DRY rule what a sacrilege) i'm sure somebody will tell me a better way but it does the job, changes the price for every plan it applies the discount if clicked, anyway have a good day.
@steppan26Posted over 3 years agoHi Luis, great job on the project. I have just completed this project myself too.
The layout and responsiveness of your project looks good to me, I just think it needs a little more love on the little details for the styling (i.e. the colour of the price should be the same blue as the heading, instead of black).
Although there's not really anything on the project sheet about it, which I guess means it's a stylistic choice, I would look at adjusting the slider to have only the 5 values provided (as opposed to a range from 1-100). This can be easily changed on the HTML sheet within the <input> tag, which would then allow you to use an array within javascript to be able to create some cleaner code.
It's great to see how other people solve the same problem, feel free to take at my solution and see if you get inspired :-) I'm no expert and I'm in the process of learning web development myself, so I am open to being corrected if anyone feels that my feedback could be better.
1