Sumayyah Sayyed• 10
@SumayyahSayyed
Submitted
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
@migsilva89
All comments
- Miguel Silva• 510
@migsilva89
Posted
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 - Umair• 240
@umairanwer
Submitted
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.
Miguel Silva• 510@migsilva89
Posted
Hey 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 - Sarah Sá• 90
@sarahalvessa
Submitted
adoraria receber feedbacks.
Miguel Silva• 510@migsilva89
Posted
Bom 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 - Ophélie Coudert• 50
@Crab-Prog
Submitted
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.
Miguel Silva• 510@migsilva89
Posted
Nice 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• 150
@aya-94
Submitted
Miguel Silva• 510@migsilva89
Posted
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 helpful
0 - Joaotbb• 190
@Joaotbb
Submitted
Miguel Silva• 510@migsilva89
Posted
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 helpful
0 - Ibrahim• 180
@Ibrahim-Eltoukhy
Submitted
please give me a feedback, that's really helps me.
Miguel Silva• 510@migsilva89
Posted
Good 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 helpful
0 - Aya• 150
@aya-94
Submitted
Been struggling on the responsive part and will be happy to hear any recommendations
Miguel Silva• 510@migsilva89
Posted
Good 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 helpful
1 - Fabi Viegas• 10
@fabiviegas
Submitted
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!
Miguel Silva• 510@migsilva89
Posted
Ola 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 helpful
0 - Max Kaiser• 300
@maxkaiser100
Submitted
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.
Miguel Silva• 510@migsilva89
Posted
Good 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 helpful
0 - Fuad Hasan• 10
@adhasanblog
Submitted
This is my first time trying the challenge in frontend mentor, Any suggestions for me to improve my coding in general?
Thank you!
Miguel Silva• 510@migsilva89
Posted
Hi 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 What are some things that I could do better code wise? How can I get my design to match the mockup more closely.
Miguel Silva• 510@migsilva89
Posted
Hi @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 helpful
2- Tassie Oshiro• 60
@tassieoshiro
Submitted
I had a little difficulty moving the icon to the right of the card, still getting used to how to space the elements. Any criticism feedback is appreciated.
Miguel Silva• 510@migsilva89
Posted
Amazing work, congrats.
I would add max-width from 1600px, cause if you go bigger the side cards are getting separated from the middle ones.
For the rest looks perfect, well done!
Regards, Miguel Silva
Marked as helpful
1 - Slideur• 70
@Slideur
Submitted
Hello,
There is an image in the folder: favicon-32x32.png but I don't know what to do. Put it in the background maybe... Do you have an idea please?
Miguel Silva• 510@migsilva89
Posted
@Slideur good job!
favicon-32x32 is the image in title bar.
<header> <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png"> </header>Hope it helps, if so please marked as useful :)
Keep going!
regards, Miguel Silva
Marked as helpful
0 - sansarj17• 180
@sansarj17
Submitted
This was an easy one. But i still struggled with sizing it perfectly. It just doesn't look as it was designed on larger viewports such as 1440px. It looks fine on my laptop but I don't know what goes wrong at 1440px. Any suggestion?
Miguel Silva• 510@migsilva89
Posted
Well done!
In order to fix accessibility issues:
-
Document should have one main landmark: https://www.w3.org/TR/wai-aria-practices/examples/landmarks/main.html
-
All page content should be contained by landmarks: Wrap your card in a main element to fix accessibility issues by placing it just after the body element and draging your content inside.
About the size looks ok to me.
Hope it helps, and keep going!
Regards, Miguel Silva
Marked as helpful
1 -
- Boluwatife• 50
@boluwatifeee
Submitted
I had some issues with the responsiveness,this is my first time working with grid layout and responsiveness. Any suggestion would be helpful.
Miguel Silva• 510@migsilva89
Posted
Good job @boluwatifeee .
I see that the font size from the titles should be a bit bigger. Also you have hover effect on the buttons and also on the text inside the button, I will advise you to apply only to the buttons. Doing this way, text will also be white when you hover on the button.
For the responsive you can use mobile first, so you will make first the mobile design, then apply changes from x resolution, example:
//From 992px this will happen.
@media (min-width: 992px) {
.container { display: flex; align-items: center; justify-content: center; max-width: 1000px; margin: auto; padding-top: 100px; }Hope it helps, and keep going!
Regards, Miguel Silva
Marked as helpful
0 - Luis Sitoe• 60
@luissitoe
Submitted
I would appreciate any feedback.😃
Miguel Silva• 510@migsilva89
Posted
Hi Luis, it looks perfect!
Well done!
Marked as helpful
0 - Aadvik• 1,250
@Aadv1k
Submitted
Was a fun challenge, although this solution has some rough edges; JavaScript is a mess, I couldn't get the formula for calculating the "Total per person" right, the code for which is here Would love to get some input on that.
Miguel Silva• 510@migsilva89
Posted
Amazing, congratz!
1 - Kamil Szymański• 140
@szymKamil
Submitted
Another try after a lot of learning and increasing my skills. Hope its better. Any sugestion will be appreciated.
Miguel Silva• 510@migsilva89
Posted
Looks very good, well done!
0 - AdelaSch• 10
@AdelaSch
Submitted
Hi all, I'm a beginner and would appreciate your feedback as I feel like I'm overcomplicating things :)
Miguel Silva• 510@migsilva89
Posted
Hi Adelasch, looks like a very good job.
Well done!
In order to avoid errors from FrontendMentor app you should fix the img element, which must have an alt attribute.
Keep going!
Marked as helpful
0 - PAleksander Tysklind• 820
@outerpreneur
Submitted
Another exercise!
on this one, I struggle to place the profile picture in between the two sections of the card. What would be the way to approach this?
I would also appreciate a few hints for placing those two circles in each way of the background. Any direction I should take?
Miguel Silva• 510@migsilva89
Posted
You should add a class relative to the back items and absolute to the image, so then you have freedom to move it as you want.
I did the same project with Tailwind. https://profile-card-component-silk-gamma.vercel.app/ Keep going.
Marked as helpful
0
