Skip to content
OverviewSolutions
13
Comments
7
kugi
@askugii

All comments

  • kugi•265
    @askugiiPosted about 3 years ago

    This looks awesome! Great job!

    Marked as helpful
    0
  • kugi•265
    @askugiiPosted over 3 years ago

    Looks great!

    Marked as helpful
    0
  • kugi•265
    @askugiiPosted over 3 years ago

    1.) Avoiding a fixed-height is crucial to a well coded component.

    Lets say you do something as simple as giving your component a fixed-height of lets say 500px. If you add content larger than this you will also have to recalculate the new 'height'.

    The better approach is to let the content dictate sizing.

    Adding: :root, * { box-sizing: border-box; } is a great start.

    This allows css to calculate your border and padding into the width/height of each element. I think this is the 'correct' and more intuitive behaviour.

    Then the 'height' of everything will be dictated by:

    Font sizes
Image sizes
Paddings
Margins
Gaps
Line heights

    Thinking in this way yields benefits later on. Whether you want to add content, whether the component has to be extremely flexible because it will be used across different pages in slightly different ways, etc.

    2.) Also, as u can see in your Report page, there are accessibility issues due to lack of tag variation.If you use tags like (main, header, section, footer) screen readers will be able to understand the page too. Also the order of headers (h1, h2, h3, h4...) matter a lot too.

    Overall a great solution! Well done :).

    Marked as helpful
    1
  • kugi•265
    @askugiiPosted over 3 years ago

    Wow, this is perfect i would say. Great job!

    1
  • kugi•265
    @askugiiPosted over 3 years ago

    I think you should check you reports and work on them. Screen readers will struggle going through this page.

    Marked as helpful
    1
  • kugi•265
    @askugiiPosted over 3 years ago

    Awesome.Good job!

    0
  • David-ODB57•10
    @David-ODB57Submitted over 3 years ago

    Feel free to tell me what's wrong or would better to do with my solution if you see something.

    Flexbox solution

    2
    kugi•265
    @askugiiPosted over 3 years ago

    Great job!

    U can add margin between images and headings if u want, but not necessary.U can make images bigger and decrease the font size of the headers.

    Also body tag is displayed as flex, and default value is row so if u add "flex-direction: column;" attribution section will be at bottom.

    0