Skip to content
OverviewSolutions
5
Comments
18
Smita
@Smita-14

All comments

  • Smita•375
    @Smita-14

    It turned out really well. Great submission! 👏👏

    Marked as helpful
  • Smita•375
    @Smita-14

    It's surprising to know that you coded this on a phone so well!✨✨ It is brilliantly done! 👏👏

    Marked as helpful
  • Smita•375
    @Smita-14

    Hey Asif! The reason is that the image is an inline element and properties like font size and line heights can affect it causing it to have little space (padding) beneath it. Set the display: block; to the image element and the issue will be fixed.

    Marked as helpful
  • Smita•375
    @Smita-14

    Hey CJ Castillo! Awesome submission! 👏 There's minor issues that you need to look at though:

    • border radius is being applied on wrong edges on smaller screen size.
    • The size of the cards increases from the bottom the moment the layout hits size smaller than 1440px.
    Marked as helpful
  • Smita•375
    @Smita-14

    Hey Geoff! You did an excellent work on this challenge. I noticed one issue that on smaller mobile screen size some part of text-block is clipped or it becomes hidden. Hope you take a look on that. Keep it up!

    Marked as helpful
  • Smita•375
    @Smita-14

    Hey Jimender! Your submission is great and almost pixel perfect! Just a few things I would like to point out:

    • The attribution part is floating over the card on the mobile screen size.
    • The card is trimmed from top on smaller screen size.
    • Use semantic html wherever possible. It will help you avoid many issues like the accessibility and html issues.
  • Smita•375
    @Smita-14

    Hey James! Your submission is excellent! It is almost similar to the design. I just want to say this that you don't have to generate more colors as all the design specs are already mentioned in the style guide. Matching the color of the image seems tricky and for that you can take a look at mix-blend-mode and background-blend-mode. Both can be useful in matching the color of the image. Keep it up!

    Marked as helpful
  • Smita•375
    @Smita-14

    I don't know what you're talking about but this seems pixel perfect to me. That is an outstanding piece of work! One thing you might wanna look into is that the site cuts off from top and bottom on some mobile screen sizes.

    Marked as helpful
  • Smita•375
    @Smita-14

    Hey @leolilo Your work is pretty awesome! There's one issue that you might wanna address. On mobile screen size the border radius is applied on the wrong edges.

  • Smita•375
    @Smita-14

    Hey Chandima! Congrats on your first awesome submission. It is nicely done. You could increase size of texts and buttons as they look smaller than in the design. Also I noticed that you have accessibility issues to address. You can do the following to fix them:

    • Landmark issue - Wrap the whole body using semantic html element such as main, section, article etc. and try to use semantic html instead of div wherever possible.

    Example

    <body>
  <main class="container">
    . . . 
  </main>

  <section class="attribution">
    . . .
  </section>
</body>
    Marked as helpful
  • Smita•375
    @Smita-14

    It is the border property that you have applied on button pseudo class that shows up making it look like it expands from right and down. Just remove the border properties from pseudo class and add it to the button instead. It works.

    Marked as helpful
  • Smita•375
    @Smita-14

    Nice work! Few things can be improved:

    • The image stretches up when you go on mobile screen or large screen size. Make it so the image doesn't stretches up no matter what screen size.
    • Add some line-heights to the paragraph.
    • Give some space to statsBox at the bottom.
    • Use semantic html where possible.
    Marked as helpful
  • Smita•375
    @Smita-14

    Hey buddy! Just set the mix-blend-mode to multiply and set the opacity to .8 on img element. It will match the color as in the design just fine.

  • Smita•375
    @Smita-14

    Hey Floripin! I too met with these scenarios and I was able to fix it so I'll try my best to help you out here:

    1. If you add max-width:40% to the text class, it will allow both the image_container and text class to fill in the 50/50 space. But sorry I am not sure why that happens. This could be because of the paddings and margins or it could be that the text area is taking as much space it wants and so does the image_container. Here the image does has a limit ( it has fixed pixels whether or not you specify it) but the text part doesn't so it takes the leftover space after the image_container is done taking the space it needs.

    2. The image is an inline element so properties like line-height and font-size would affect it. Setting display:block or display:inline-block would solve the issue. StackOverflow | IMG has 5px extra padding at bottom of div

    I hope that helps.

    Marked as helpful
  • Smita•375
    @Smita-14

    Awesome work!

  • Smita•375
    @Smita-14

    Hey! Some of the border radius is applied on wrong edges and the font on the button should also be Lexend Deca. Overall your solution is stellar and your skills are outstanding! Nicely done.

  • Smita•375
    @Smita-14

    The color on titles and on the button texts need to be fixed other than that you did a good job. Keep it up!

    Marked as helpful
  • Smita•375
    @Smita-14

    Your website shows mobile screen size even on the desktop screen size.