Skip to content
OverviewSolutions
5
Comments
7
lrobb95
@lrobb95

All comments

  • lrobb95•200
    @lrobb95

    Hello Vinicius,

    Awesome job on the project!

    The solution I can give you would require you to nest your #results card inside your #summary card and use display: flex; to get them next to each other. Then for the mobile media query, use flex-direction: column; to make the #results get forced to the top. Also, don’t forget to use the gap property to get the desired spacing you want!

    Very great job on this project!

    -L

    Marked as helpful
  • lrobb95•200
    @lrobb95

    Hello, Moon!

    Wonderful job on the project!

    I just got out of work and came across this project on my phone. I noticed some side scrolling on mobile view. I looked at the code and noticed that there weren’t any media queries. Also, I would recommend that you try transitioning over from using px on text to rem’s.

    Marked as helpful
  • lrobb95•200
    @lrobb95

    Hello Jalen!

    Love the project and congratulations on completing the challenge! I noticed that the .original class you have has each number/symbol crossed off.

    One thing I would recommend on preventing the breaks on the striked portions is to use the HTML <s> to make the whole price crossed off with one line. It should look like this:

    <s>$169.99</s>

    The next thing I would recommend is to utilize the flex property on your button to center the text and the svg image both vertically and horizontally. This can be done by doing this:

    .btn {
display: flex;
align-items: center;
justify-content: center;
}

    Then to get some nice spacing between the icon and the text, throw in the gap property on your button. For instance - gap: 1rem;

    Let me know if this helps!

  • lrobb95•200
    @lrobb95

    Hello, Matt!

    Wonderful job on the project! I have yet to do this one, however I see you were using margin’s to separate the boxes. I would fully recommend trying the “gap” property out. If I had to guess, gap it to between 1rem to 2rem. If you have never used the gap property, it’s as simple as putting:

    gap: 2rem;

    Let me know how it works out!

    Marked as helpful
  • lrobb95•200
    @lrobb95

    Hello, Leo!

    Unbelievable! Job well done.

    Here’s a wonderful solution to your question if using background-image:

    The overlay feature you may be interested in is something called background-blend-mode. The syntax is straight forward and it is a lot quicker (and easier to do) The syntax is as follows,

    background-image: url(‘images/(link to image goes here)’;
background-color: periwinkle;
background-size: cover;
background-position: center;
background-blend-mode: overlay;
    Marked as helpful
  • lrobb95•200
    @lrobb95

    Hello!

    Congrats on completing this project! I see you’re wondering how to center the icons and everything else on those lines. One thing I’d recommend trying is making the .smallspace div like this.

    Let me know if this helps!

    .smallspace {
display: flex;
align-items: center;
}
  • lrobb95•200
    @lrobb95

    Hello!

    First, I’d like to say awesome job on this project!

    Now, I’m just a small fish in the pond, but for the accessibility part, I’d recommend putting a title, role, and/or a type on your buttons. Aria attributes are nice things to have as well. I know I could use those a lot more often myself.

    Marked as helpful