Georginio• 360
@Georginio-prod
Submitted
P
EHO
@hermannleboss
All comments
- Georginio• 360
@Georginio-prod
Submitted
What are you most proud of, and what would you do differently next time?
j'ai bien appris
What challenges did you encounter, and how did you overcome them?
dans le css
What specific areas of your project would you like help with?
aucun
The solution is not available again.
0 - J4NBI• 250
@J4NBI
Submitted
The best good way to do this kind of card is to do it with simple HTML and CSS without any CSS framework.
Bootstrap is a little bit difficult to customise. So when you use it as a newbie it will be more difficult for you.
And working with simple HTML & CSS help you mastering more CSS and design.
Marked as helpful
0 - Sabine• 40
@Sabineeklo
Submitted
@great job sabine. Check you accessiblity and remove the padding in the bottom. Somme fix in the code
Applying thin to the body is not a good idea. If you want to specify font apply it to a
p & htag. They the best way to have a default font style.body { ........... font-family: 'Red Hat Display', sans-serif; color: #717fa6; font-size: 16px; font-weight: 500; }remove the height in the container
height: 85vh;0 - WirelessBrain• 20
@prasamth
Submitted
Hello, nice work.
You can use the flexible box to center the map horizontally and vertically. You may have a better result.
Then check the accessility issues. Just add a landmark to your main content.
You have the explain in the accessiblity section Or use this link https://dequeuniversity.com/rules/axe/4.3/region?application=axeAPI
0 - theblackman• 100
@theblackman2
Submitted
Hello, nice work.
The with of your card is wrong. Use 350px for the with and update the content accordingly. Then check the accessility issues. Just add a landmark to your main content.
You have the explain in the accessiblity section Or use this link https://dequeuniversity.com/rules/axe/4.3/region?application=axeAPI
0 - sek-devops• 110
@devwinner-sek
Submitted
I'm new on Frontend Mentor. This is my first challenge.
- In responsive side, do i need to use media queries for this challenge ? (Because the content will be centered in all screens desktop, mobile)
hi @devwinner-sek, check
- first mistake, To apply the align-items option for vertical alignment on flex boxes, the parent element must have a height greater than the child. By wanting to do this you have applied height 100% to the parent.
Whereas height 100% means takes the 100% height of my parent.
This is the error.
Since the parent's parent defaults to the height of its cumulative children.
So you should have used the Height = 100 vh option.
the vh unit is according to the height of the screen.
0 - dimakuznetsow• 30
@dimakuznetsow
Submitted
First project here
I'm pretty confident with the final look of the card, but not sure about the code itself.
Particularly I'm not that familiar so far with the position attributes. As for now the card is positioned in the center of the page with 'margin' property. so is the img in the card. But I think there is a more clever way to position all the elements in the center of the page/card etc.
Hello, the width of the card is
320pxinstead of230 px. It's why your card looks smaller.And you have to add a padding under the card : the text is near the border.
Then check the accessiblity of your card. You have to add at least a role attr to a makup that defin the landmark.
For exemple for
<div class="box"> ... <div/>add role="main" then you have
<div role="main" class="box"> ... <div/>For more click on this link
https://dequeuniversity.com/rules/axe/4.3/landmark-one-main?application=axeAPI
Marked as helpful
0 - dimakuznetsow• 30
@dimakuznetsow
Submitted
First project here
I'm pretty confident with the final look of the card, but not sure about the code itself.
Particularly I'm not that familiar so far with the position attributes. As for now the card is positioned in the center of the page with 'margin' property. so is the img in the card. But I think there is a more clever way to position all the elements in the center of the page/card etc.
Hello, your app is not deployed correctly and your publication page seems unavailable. Please check it so I can make beste review.
0 - LakiDev• 80
@LakiiDev
Submitted
Hello nice work. You have accessibility issues. Your page content should be contained by landmarks. The landmark is something like that
<body> <div role="banner">This is the header</div> <div role="navigation">This is the nav</div> <div role="main">This is the main</div> <div role="contentinfo">This is the footer</div> </body>The role attribute.
It defines all sections of your content and is useful for screen readers.
For your code you can encapsulate all the content in the body markup and add role main or role content.
Marked as helpful
0 - salahudheen k• 265
@salahudheen007
Submitted
Any suggestions to improve?
Hello Nice job.
i have to notice that in the design the "Order sumary" is center.
Marked as helpful
0
