Skip to content
Submitted 11 months ago

Responsive three column preview card using React and SCSS

Rupali•780
@rupali317
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I wrapped up my 2nd challenge and I have the following queries:

  • I have used semantic HTML as much as possible. In src/components/Card /Card.jsx instead of <div>, I used <article> and <section>. My reasoning is that <section> is handy for grouping similar content and <article> is for grouping text like blog. So, is the usage of these two tags correct in my code? Or do you have other recommendations?

  • What do you think of the test cases that I created (please refer to /src/components/Card/Card.test.jsx, src/components/Footer/Footer.test.jsx, src/components/GroupCard/GroupCard.test.jsx)? Am I following good practices? Should I have considered something differently?

Looking forward to your responses

Community feedback

  • Dimitar Radev•930
    @Mitko90Posted 11 months ago

    Hi, I really like your solution to this challenge.

    I use a 1440 lenovo ideapad and when I open your site, it gave me the mobile version.

    Maybe you can twitch a little your breakpoint.

    Keep up the good work.

    1
    Rupali•780
    @rupali317Posted 11 months ago

    Thank you for testing it on your system @Mitko90 I appreciate it.

    I have a few follow-ups. Can you help me confirm the following:

    1. So you are getting the mobile version when the screen's width is still 1440px. Is that correct?
    2. What is your browser's font setting?
    3. When you viewed the solution, what was the zoom level?
    0
    Dimitar Radev•930
    @Mitko90Posted 11 months ago

    @rupali317 Yes, I checked once again, it still gives me the mobile version.

    I use Firefox and it is by default set on 16px. I have not changed that.

    My zoom is also by default 100%. In my dev tools when I increase the size by only one pixel, it shows me the full version. Also when I zoom out just 10%, it again shows it to me.

    Anyway, didn't mean to bother. Maybe it's just a me problem 😎️

    Marked as helpful
    1
    Rupali•780
    @rupali317Posted 11 months ago

    @Mitko90 Thank you so much for the detailed settings. I am trying to replicate it in my Firefox, with 1440px and I have not changed any default settings for font and zoom level. I get the desktop version. When it is less than 1440px, then the mobile version shows up as expected. I am unable to replicate this issue

    Do you have suggestions on how I can go with this? I would like to fix the issue

    1
    Dimitar Radev•930
    @Mitko90Posted 11 months ago

    @rupali317 Okay, it's definitely a me problem. I thought I had a 1440 laptop, as it says on the box, but I used This resolution test and it showed me 1366. So I apologize for the inconvenience.

    However, with that put aside, this is the first problem I have of this sort. I always get desktop versions (or at least one of the desktop versions) on every website.

    Now to your question. I checked other users' submissions to this challenge, and almost everywhere the breakpoint is somewhere between 600 and 800px. That will fix the issue for smaller laptops like mine but I'm not in any way advising you, let alone expecting you, to do this. It's your design - your rules.

    1
    Rupali•780
    @rupali317Posted 11 months ago

    @Mitko90 Thank you so much for the elaboration related to the breakpoints for other submissions. I will keep that in mind. I appreciate you taking the time to test out my solution :D

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord