Skip to content
OverviewSolutions
8
Comments
7

Rimsha

@rimshub240 points

Solving frontend challenges as a hobby and learning a lot 😄

Latest solutions

View more solutions

Latest comments

  • Rimsha•240
    @rimshub

    Hi, congratulations on getting the challenge done!

    Great solution, everything is working smoothly and nicely. However, I have noticed the flag images of the country are not responsive to screen sizes. The image completely disappears on mobile screens. So I looked into the file CountryCard.scss

    img {
        width: 100%;
        height: 200px;
        object-fit: cover;
    }

    I think the following are the issues with these rules:

    1. The image has a fixed height of 200 pixels, which leads to cropping or distortion if the original image's aspect ratio is different.
    2. The object-fit: cover; rule will make the image cover the entire container while maintaining its aspect ratio, potentially cropping parts of the image to fit the specified height of 200 pixels.

    The following approach allows the image to automatically adjust its size based on the width of its parent container. Here's how you can do it:

    img {
  max-width: 100%;
  height: auto;
}

    • max-width: 100%; This rule ensures that the image will never exceed the width of its parent container. It scales down the image proportionally to fit within the container's width.

    • height: auto; Setting height to auto maintains the image's aspect ratio, which means it will adjust its height proportionally to the width changes imposed by max-width: 100%;

    You can learn more here How to make images responsive - CSS

    Hope my answers did help you! Happy learning😄

    Marked as helpful
  • Rimsha•240
    @rimshub

    Hi @Ana-Zezo, congratulations on getting the challenge done! Great effort.

    The layout for desktop-size screens looks good but it's not working for other screens. You can learn more about CSS responsiveness from here: Responsive Web Design - Media Queries

    I also want to highlight the issue with the Font link. In your HTML <head>, you're trying to link to a Google Font named "Outfit," but the URL provided is incorrect. You should link to Google Fonts using the correct format.

    Update this line:

    <link rel="stylesheet" href="https://fonts.google.com/specimen/Outfit">

    To this:

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Outfit">

    Hope my answers did help you! Happy learning😄

    Marked as helpful
  • Rimsha•240
    @rimshub

    Hey @Ayoife good solution!! Animations are looking good and smooth.

    Some points i noticed while testing:

    1. The pattern divider overlaps with the dice-icon (button) when text of advice increases. I think you should set some height of paragraph as well, not only width in advice class. OR see if you can set the pattern divider image position to not change when text length increases.

    2. Also, its better idea to go with one animation. It looks too much when type of animation changes with every advice. Otherwise animations really look nice!!

    I hope this helps. Keep going✨

  • Rimsha•240
    @rimshub

    Hi David, great solution, everything is working smoothly and nice.

    About your question, I think it is great idea to have a sticky navigation on home page for large screens but on small screens there's space issue sometimes so its better to go with non-sticky. Also you can just make hamburger icon sticky for small screens.

    Also, it depends on necessity of it. For example for large sites it is good to have a sticky navbar as it enables customer to navigate swiftly. But for a one page small website or where there's little or no scrolling then there's no need of it.

  • Rimsha•240
    @rimshub

    Hi,

    Nice attempt. Your approach is differnet and good. Well done!

    I noticed some elments of design are missing. You could add more features like:

    • Completed Tasks
    • Active tasks
    • How many tasks are left to do
    • Theme changer and so on

    It would be perfect solution then. All the best! 😄

  • Rimsha•240
    @rimshub

    Hey Catherine,

    Great work. Thank you for mentioning chrome extension. 😅

View more comments