Skip to content
OverviewSolutions
5
Comments
7

lrobb95

@lrobb95Minnesota200 points

Hello everyone, I am self taught when it comes to web development and love any sort of criticism since in my opinion, it is the best way to grow! I appreciate any feedback you guys may give whether good or bad. I am looking for job opportunities and yearn to learn new thing’s.

I’m currently learning...

I am currently learning deeper concepts of JavaScript. I know the very basics and some medium level JavaScript.

Latest solutions

Latest 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;
}
View more comments