Skip to content
OverviewSolutions
8
Comments
7
Rimsha
@rimshub

All comments

  • Rimsha•240
    @rimshubPosted about 1 year ago

    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
    1
  • Rimsha•240
    @rimshubPosted about 1 year ago

    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
    0
  • Ayoife•300
    @AyoifeSubmitted about 2 years ago

    Wow!, my first Junior challenge! , I'm hoping you'll leave an honest review of this solution. And I also added some animations....Were they good?, were they too much?, Let me know in your feedback!. And also, I'm facing a problem with increasing the height of the container as the text increases, I'll be glad if you could help me with that bug. :)

    Advice Generator App using CSS Flexbox

    1
    Rimsha•240
    @rimshubPosted about 2 years ago

    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✨

    0
  • David•8,000
    @DavidMorgadeSubmitted about 2 years ago

    Hello and welcome to my Creative agency, single page solution

    Extra Features:

    • Sticky Navbar for easier navigation.
    • Smooth navigation clicking the links from the navbar
    • Custom Swiper.js Slider.
    • Personal changes on hover, image sizes, buttons sizes

    Breakpoints:

    • Mobile: 375px - 768px
    • Tablet: 768px - 1440px
    • Desktop: 1440px+

    Things that I learnt:

    • CSS Mask
    • Improved a lot on pseudoelements (thanks to kevin powel vids)
    • More components, and more reusable components

    Built with:

    • React
    • Styled Components
    • Swiper.js

    Question to the community:

    Sticky navbar, do you think is a good idea? Thoughts on navbar size when navigating on the page?

    Hope you like it!, any feedback would be appreciate, I would apply all the changes that you suggest me here!

    Creative agency single page, React - Swiper -Styled Components

    2
    Rimsha•240
    @rimshubPosted about 2 years ago

    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.

    1
  • Rimsha•240
    @rimshubPosted over 2 years ago

    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! 😄

    1
  • 👾 Ekaterine Mitagvaria 👾•7,600
    @catherineisonlineSubmitted almost 3 years ago

    Hello, Frontend Mentor community! This is my solution to the Testimonials grid section.

    I have read all the feedback on this project and improved my code. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Testimonials grid section

    33
    Rimsha•240
    @rimshubPosted almost 3 years ago

    Hey Catherine,

    Great work. Thank you for mentioning chrome extension. 😅

    0
  • Zineb2003•220
    @DesignToWebsiteSubmitted almost 3 years ago

    What you think about the animation ? I tried to make it responsive as much as I could , Please give me some suggestions to improve my solution.

    Easybank landing page

    1
    Rimsha•240
    @rimshubPosted almost 3 years ago

    Nicely done! I really like the animation effect. You did that well 🙌

    Marked as helpful
    0