Skip to content
OverviewSolutions
3
Comments
5
stenito
@stenito

All comments

  • stenito•80
    @stenitoPosted over 2 years ago

    Hi there,

    Nice work!

    When I looked at your solution website on mobile, I noticed you are using 100vh to set the height of the container. In your case, the body tag.

    I used to do that too until I noticed, it hides some of the page under the navigation bar of safari on iOS when it’s set to be in the bottom (default since a few version).

    You can solve that by using height: 100%; and min-height: 100%; on both the HTML tag and the body tag. This way, the content will not be under the nav bar!

    100vh is the height of the viewport without subtracting the navbar that hides when you scroll. 100% is the height of the visible viewport and gets bigger when the navbar hides when you scroll.

    A lot of websites use 100vh to show cookie modals and on iOS safari, the buttons are often under the navbar… which is anoying :)

    0
  • stenito•80
    @stenitoPosted over 2 years ago

    Hi there, well done!

    I would try to respect the sizes of the design, which is what you would have to do in a professional situation ;-)

    On the report issues:

    • Icon tag

    The icon tag should have type="image/png"and not type="png". A small thing but the browser uses type to know what type of file it is rendering. It might handle this small mistake, but you should not depend on the browser handling errors ;-).

    • Semantic elements A document should have a <main> tag. The <section> tag can only be part of a <main> tag it should not be used outside of it.
    <main id="section">
  <div class="QrCode">
    <img src="image-qr-code.png" alt="frontendmentor">
  </div>
  <h2 class="firstpara center">Improve your front-end skills by building projects</h2>
  <div class="secondpara center">Scan the QR code to visit Frontend Mentor and take your coding to the next level
  </div>
</main>

    If you want to code your component so you can use it afterwards, just add a <main> element to your page to avoid the Accessibility (semantic) issues.

    Marked as helpful
    0
  • stenito•80
    @stenitoPosted over 2 years ago

    Hi there! Nice work! I hope my feedback can help you :)

    • Alt attribute on images

    If an image is not part of the content, but rather a design element, you can add an empty alt tag to the element: <img src="./images/..." alt ="">. That is accepted if you check accessibility.

    • Media queries

    When I write simple CSS, even with SASS, like this exercise, I just create one media query and add all changes to that media query. When I work on something more complex, I usually use @include media in SASS. I end up with a lot of media queries that are not grouped. It is said to be more overhead for the browser than grouping the media queries, but I have not noticed any significant difference on rendering time. I prefer the ease of development when the media queries are in the rule :)

    Marked as helpful
    1
  • stenito•80
    @stenitoPosted over 2 years ago

    Hi there!

    Seems like you did a good job! I would try to respect the design sizes though. In a professional setting, that’s what will be expected.

    It’s harder when you don’t have a pro account because you have to figure out the sizes from a jpg which is not always easy. You can use an image editor (photoshop or free: gimp) to figure out the sizes of all elements. Font sizes are harder. You could set the design jog as a background in your html, set your card html element to opacity 0.5 and then adjust sizes and other properties. It’s like a template under your work.

    Marked as helpful
    0
  • stenito•80
    @stenitoPosted over 2 years ago

    Hi there,

    I would try to respect the sizes of the component though. You made it smaller. If you have to do professional work, you will have to respect the design sizes ;)

    But other than that, you did a great job!

    1