Skip to content
OverviewSolutions
6
Comments
122

bikeinman

@BikeInMan1,080 points

Support engineer by day for some Java based systems and Angularjs based apps for a few years now. Initially started learning CSS to solve some UI problems at work, but I found CSS very fascinating and want to learn all I can with the time I have.

I’m currently learning...

CSS, Flexbox, Grid, UI Design and Responsive Design.

Latest solutions

Latest comments

  • bikeinman•1,080
    @BikeInMan

    Hi,

    Nice work so far. Desktop design is close to the requirements.

    However, on small screen sizes, there are a couple of problems. The first card is missing border color on top. And there is no gap/margin between cards.

    Also, on tablet sizes. The cards seem to stretch all the way to the sides. To prevent this consider setting a max-width on cards. eg:

    .card-content {
max-width: 300px;
margin: 10px;
}

    Good Luck

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Hi,

    Nice work! Try setting the following properties on your body. Looks much better.

    background-repeat: no-repeat;
background-size: cover;
    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Hi,

    The layout and css part are very good. Works well. Congratulations.

    However, validations always return errors, even if enter all the fields correctly. Can you please check whats happening?

    Good Luck.

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Very nicely done. Works well in both sizes. I could not complete this challenge nearly as good as yours.

    I am just curious about one thing. Why did you choose span for the question. and p for the answer. Why not divs for both or p for both ? Span seems like an inline element according to MDN.

  • bikeinman•1,080
    @BikeInMan

    Hi,

    Nice work with 2X2 on tablets. Regarding your question. You can remove top: 25%; on supervisor and calculator

    and just add the align-items: center; to .feature-section

    Let me know if it works out.

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right? Good Luck.

    Marked as helpful
  • bikeinman•1,080
    @BikeInMan

    Hey, nice work so far.

    In the .para you have used <br> to break the line. <br> is not meant for styling but for breaking lines where appropriate, like in addresses etc. Instead you may also use max-inline-size to control the length of a line in p tags.

    Card titles are of different color than design. Intentional?

    You can make this challenge more interesting by adding some interactivity to the cards like a hover effect and also making each card a link. They are supposed to lead somewhere, right?

    If you can push yourself a little more, you may even try to display 2x2 cards on tablet sizes.

    Good Luck.

View more comments