Skip to content
OverviewSolutions
16
Comments
5

Jose Gonzalez

@placetenoMilwaukee, WI310 points

Software engineer with a passion for building beautiful, responsive, and useful websites and web applications. Skilled in HTML, CSS, SASS, JavaScript, and web accessibility.

I’m currently learning...

MERN stack

Latest solutions

View more solutions

Latest comments

  • Jose Gonzalez•310
    @placeteno

    Hello Ouattara,

    Like Adriano mentioned, the final result of your project looks great, very close to the original design. Well done!

    I just wanted to encourage you to use rem as your main unit throughout the whole project instead of px. There's nothing wrong with pixels, but they are not as responsive as rem, especially if a user has a different font-size in their browser other than the regular 16px. Also, try resetting your margin and padding and setting box-sizing: border-box at the top of your stylesheet using the universal selector *{...}. That will make your life much easier! 😃

    I hope this helps!

    Marked as helpful
  • Jose Gonzalez•310
    @placeteno

    Hi @joninho027, great job with this solution! It looks good in both desktop and mobile views.

    There's a tiny thing I would point out and it's in the mobile view. The <img> overflows the .card container and the border-radius that's not apply. But other than that it looks good!

    I hope this is helpful, and keep coding! 😃

    Marked as helpful
  • Jose Gonzalez•310
    @placeteno

    Hi @ahmedJabban,

    I was looking at your solution and it looks good in desktop view! However, there's a small error in your media query that prevents the card to switch to mobile view. You wrote @media (width:375px) but inside the parenthesis it should be (max-width: 375px). That should fix the responsiveness issue.

    Also, I noticed in your CSS that you used the class .containor all the time when writing the rules for the other classes. This is not necessary because there's no overlap. If you had two, let's say, .price classes in two different containers, then it would make sense to specify which price, but that's not the case here.

    I hope this is useful! And keep going! 😃

    Marked as helpful
  • Jose Gonzalez•310
    @placeteno

    Hi @Ax-cd, your component looks good, both in mobile and desktop, well done!

    I had a couple of suggestions that could improve your solution. For your .card class, using flexbox would make it easier to control the widths of the image and the content. You can add a gap and control the position of the elements much better. Also, instead of giving your .card a fixed width using percentages, try using <max-width> with rem, it's more responsive and it stays the same regardless of screen size.

    Regarding the media queries, there's no need to have one for mobile and desktop views. Usually, you decide what approach to use first, mobile-first or desktop-first and, once you decide it, just add the corresponding media queries for the other screen sizes. For example, you could have started with desktop-first writing the code for that view and then add media query for the mobile view, tablet, etc.

    I hope this helps!

  • Jose Gonzalez•310
    @placeteno

    Hi Christina! Your card looks really good! I actually like the version you created better than the original. I was looking at your code and I have a couple of observations. I noticed you used the <section> tag several times for each element. I think it's not necessary in this case being such a small component, so divs would have worked just fine. However, if you want to use sections, I would have grouped the heading and the paragraph in one section and the CTA buttons in another, so the code looks cleaner. You did a great job with the plan description. I hope this helps!

    Marked as helpful