Skip to content
OverviewSolutions
15
Comments
11
P
EHO
@hermannleboss

All comments

  • EHO•265
    @hermannlebossPosted 4 months ago

    The solution is not available

    0
  • Georginio•360
    @Georginio-prodSubmitted 6 months ago
    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

    page réalisé avec du html5 css3

    2
    EHO•265
    @hermannlebossPosted 4 months ago

    The solution is not available again.

    0
  • EHO•265
    @hermannlebossPosted 5 months ago

    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
  • EHO•265
    @hermannlebossPosted about 2 years ago

    @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 & h tag. 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
  • EHO•265
    @hermannlebossPosted over 2 years ago

    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
  • EHO•265
    @hermannlebossPosted over 2 years ago

    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-sekSubmitted over 2 years ago

    I'm new on Frontend Mentor. This is my first challenge.

    1. In responsive side, do i need to use media queries for this challenge ? (Because the content will be centered in all screens desktop, mobile)

    HTML, CSS

    3
    EHO•265
    @hermannlebossPosted over 2 years ago

    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
    @dimakuznetsowSubmitted over 2 years ago

    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.

    QR code component HTML CSS solution

    3
    EHO•265
    @hermannlebossPosted over 2 years ago

    Hello, the width of the card is 320px instead of 230 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
    @dimakuznetsowSubmitted over 2 years ago

    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.

    QR code component HTML CSS solution

    3
    EHO•265
    @hermannlebossPosted over 2 years ago

    Hello, your app is not deployed correctly and your publication page seems unavailable. Please check it so I can make beste review.

    0
  • EHO•265
    @hermannlebossPosted over 2 years ago

    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
  • EHO•265
    @hermannlebossPosted about 3 years ago

    Hello Nice job.

    i have to notice that in the design the "Order sumary" is center.

    Marked as helpful
    0