Skip to content
OverviewSolutions
1
Comments
16

Yashasvi Singh

@Yashasvi2704235 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Yashasvi Singh•235
    @Yashasvi2704

    Hi Balmores,

    You are missing the :hover state on buttons, which is a quick fix.

    Also in the responsive region < 1265px, there is a LOT of padding and margins. Just tweak it down a little bit.

    Other than that, Great.✌

  • Yashasvi Singh•235
    @Yashasvi2704

    Hi Fatima, I guess you started mobile first, which looks pretty solid.

    There were a few Issues I could spot.

    1.On a large screen, the section for content should have a max-width property set so the card doesn't take up the full available width.

    1. From 1300-1400px, the content of the card overflows the card.

    2. The image looks a lot stretched from 700-1300px. You can use a background image instead of a <img> tag.

    Marked as helpful
  • Yashasvi Singh•235
    @Yashasvi2704

    Hi @Marlonsz36,

    Good to see the use of :first-child and :last-child selectors. Makes the solution way more flexible than mine.

    One thing that I spotted was

    1.On changing responsiveness, some cards have different heights do to the difference in content of each card.

    Different Height Card Fix.

    1.You know flexbox as you used it in you cards. You could use it in the card .card-body itself to line up the items vertically .

    . 2. Instead of of having a fixed margin-bottom on the paragraph, you can just have an defined height for your .card-body element and vary the padding between the elements using padding-bottom:auto.

    Marked as helpful
  • Yashasvi Singh•235
    @Yashasvi2704

    Hi @@multidamsy,

    There are a few minor issue I could spot.

    1.On changing responsiveness, some cards have different heights do to the difference in content of each card.

    2.The button size on mobile is HUGE . You can make it consistent with the previous button.

    Different Height Card Fix.

    1.You know flexbox as you used it in you cards. You could use it in the card(.box-1, .box-2,.box-3) itself to line up the items vertically .

    . 2. Instead of of having padding :5%; overall, you can just have an defined height for your .box element and vary the padding between the elements.(you can visit my solution if you wanna do that way.)

  • Yashasvi Singh•235
    @Yashasvi2704

    Hi @walmanjm,

    The implementation looks good for mobile as well as big screens. You might wanna look into the area of 770px-1000px where everything is too squeezed and starts overlapping.

    Good Work.!

  • Yashasvi Singh•235
    @Yashasvi2704

    Hi Paisley,

    For the heights problem that you mentioned,

    1. You know flexbox as you used it in you cards. You could use it in the card itself .part to line up the items vertically .

    . 2. Instead of of having padding :10%; overall, you can just have an defined height for your .part element and vary the padding between the elements.(you can visit my solution if you wanna do that way.)

    For the second point that you mentioned, you might wanna look into the BEM framework( nothing to worry.. it's not like a JS framework😛). It just guides you for the naming convention of the CSS classes. There are alternatives available for BEM. Choose whatever you want.

    Marked as helpful
View more comments