@SumayyahSayyedSubmitted over 2 years ago
I don't understand how to center my whole card vertically. I used margin to center it. But is there any better solution to this?
Miguel Silva
@migsilva89All comments
- @migsilva89Posted over 2 years ago
I believe you can fix it with::
margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto;
Great job with the challenge, keep going.
Regards, Miguel Silva
0 - @umairanwerSubmitted over 2 years ago
This was a bit challenging, but also learned a lot while doing it. Used json file to read data and I also tried to make my code more generic so new categories can be inserted easily.
@migsilva89Posted over 2 years agoHey Umair, good job with the challenge.
I see that you have some HTML ISSUES, in order to fix them you should: consider the h1 element as a top-level heading only (all h1 elements are treated as top-level headings by many screen readers and other tools).
Keep going! Regards, Miguel Silva
0 - @sarahalvessaSubmitted over 2 years ago
adoraria receber feedbacks.
@migsilva89Posted over 2 years agoBom trabalho com este challenge.
Contudo a font parece nao e a mesma e o container fica muito esticado em ecras grandes.
Aconselho a usar um max-width to main cointainer, e como disse o Rodrigo poderia ser um pouco maior.
De resto muito bom, parabens.
Se o comentario ajudou de alguma forma, marque como useful pf :)
Bom codigo! Miguel
0 - @Crab-ProgSubmitted over 2 years ago
It selects the last number you choose, even if the others are still in orange.. I'll try to fixe that later, in order to select only one number at a time. But if you select only one, you won't have this problem! If you have any advices, I'll be happy to read about it.
@migsilva89Posted over 2 years agoNice job on this challenge. You have some HTML issues,
All page content should be contained by landmarks: https://dequeuniversity.com/rules/axe/4.3/region?application=axeAPI.
About your question, I believe the best solution is to use an input radio instead of a button. With the input radio, every time you select one the other is unselected.
Also, see that orange is the color on HOVER and dark gray is the color when you select it. This is a rating component so we should be able to select only one number.
Hope it helps, if so please mark it as helpful.
Happy code! regards,
Miguel Silva
0 - @aya-94Submitted over 2 years ago@migsilva89Posted over 2 years ago
Very good job with this challenge. In order to be pixel perfect, you can try to use Figma, and upload the design to it.
This way you are able to check the px and make it px perfect :)
Hope it helps.
Regards, Miguel Silva
Marked as helpful0 - @JoaotbbSubmitted over 2 years ago@migsilva89Posted over 2 years ago
Hi Joao, I see an HTML accessibility error "Images must have the alternate text".
More info :https://dequeuniversity.com/rules/axe/4.3/image-alt?application=axeAPI.
regards Miguel Silva
Marked as helpful0 - @Ibrahim-EltoukhySubmitted over 2 years ago
please give me a feedback, that's really helps me.
@migsilva89Posted over 2 years agoGood job!
I will advise you to use max-width on your body in order to match the challenge, I believe around 1000px will do the job.
The rest looks perfect.
For the accessibility issue please check:
- https://dequeuniversity.com/rules/axe/4.3/page-has-heading-one?application=axeAPI
Hope it helps, if so please marked as useful :)
Regards, Miguel Silva
Marked as helpful0 - @aya-94Submitted over 2 years ago
Been struggling on the responsive part and will be happy to hear any recommendations
@migsilva89Posted over 2 years agoGood job with the challenge.
I think that you should take out position:absolute for the mobile version and use grid (1col 2 rows) for the mobile.
I also see that you are missing the background image on the desktop version.
Let me know if you need any help I can push your code and make some fixes.
regards, Miguel Silva
Marked as helpful1 - @fabiviegasSubmitted over 2 years ago
Hi! This is my first challenge and any feedback are welcome! I used just flex property and I has some difficulty with the spaces in the cards, but I did my best. Thank you!
@migsilva89Posted over 2 years agoOla Favi, muito bom para primeiro projecto.
Eu so aumentava um pouco a width de forma a melhor combinar com o design pedido.
De resto esta otimo,
vejo tambem que tem 3 HTML accessibility errors (The element button must not appear as a descendant of the a element.) Nao pode colocar o elemento <button> dentro de um <a> .Por favor marque como usefull se ajudou de alguma forma.
Boa programacao.
Miguel Silva
Marked as helpful0 - @maxkaiser100Submitted over 2 years ago
Not too hard of one, but one thing: I couldn't figure out how to keep my mobile version from sort of floating a little left or right - any ideas what I'm doing wrong here? I couldn't get it to stay in one place.
@migsilva89Posted over 2 years agoGood job completing this challenge
Your solution looks very good, I could see that the responsiveness on Ipad12 is not good, I will advise you to also make a @media for that screen size.
For the rest well done.
keep up the good work
Regards, Miguel Silva
Marked as helpful0 - @adhasanblogSubmitted over 2 years ago
This is my first time trying the challenge in frontend mentor, Any suggestions for me to improve my coding in general?
Thank you!
@migsilva89Posted over 2 years agoHi Fuad Hasan, congrats, the design is very close.
Just an advice, if you see it on bigger screens it gets messy, I believe you should use a max-width in your main container or do a @media for bigger screens.
For the rest, just keep up the good work.
Regards, Miguel SIlva
0 - @Josh-D18Submitted over 2 years ago
What are some things that I could do better code wise? How can I get my design to match the mockup more closely.
@migsilva89Posted over 2 years agoHi @Josh, I will advise you to use max-width on your body. To avoid that the squares get messy for bigger screens.
Keep up the good work!
regards Miguel
Marked as helpful2
