Skip to content
OverviewSolutions
6
Comments
122
bikeinman
@BikeInMan

All comments

  • bikeinman•1,080
    @BikeInManPosted over 2 years ago

    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
    0
  • bikeinman•1,080
    @BikeInManPosted over 2 years ago

    Hi,

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

    background-repeat: no-repeat;
background-size: cover;
    Marked as helpful
    0
  • bikeinman•1,080
    @BikeInManPosted over 2 years ago

    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
    0
  • Ted•180
    @sharipoff-0-1Submitted over 2 years ago

    Hello every one, here is my solution to the accordion card challenge, feel free to look at it, and please share your thoughts about it, I look forward to suggestions to improve my code...

    Responsive accordion, mobile first, accessibility

    1
    bikeinman•1,080
    @BikeInManPosted over 2 years ago

    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.

    0
  • Htein Linn•130
    @hteinLinn210Submitted over 2 years ago

    In this challenge, I mainly used grid for responsiveness. I made three layouts: desktop, tablet, mobile. And I started with mobile layout first. In the last part, I am not happy with my code that I have to use top: 25% to centre a div. How can I use other ways like align-item: center to center that. Feedbacks are warmly welcomed.

    Happy Coding!

    Four Card Feature Section

    2
    bikeinman•1,080
    @BikeInManPosted over 2 years ago

    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
    1
  • Ratnesh sahu•410
    @alexmercer500Submitted over 2 years ago

    HI I'd appreciate any valuable feedback, It'd would be very helpful to provide correction and more easy approachable and cleaner way for the design.

    Four Card Feature Segment

    1
    bikeinman•1,080
    @BikeInManPosted over 2 years ago

    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.

    1
  • Julian Florez•190
    @juliflorezgSubmitted over 2 years ago

    Hello frontendmentor community! this is my solution to this challenge, feel free to tell me if you find any bug or something funny on your devices while seeing this, thank you guys and keep on coding!

    multicolumn card feature section, using sass

    1
    bikeinman•1,080
    @BikeInManPosted over 2 years ago

    The design on desktop seems to be very close to the design. Congratulations.

    Some suggestions about markup.

    1. top-info should be wrapped in a header and not article

    2. h2, h1 is the not the right order. Here you seemed to have used it only for sizing. h1, h2 are not meant for sizing but for section headings in long form articles. You could have wrapped both the lines in h1 and one of them in span inside it and style span separately.

    3. About card titles, span is not the right element. May be h2 or h3 is better. span is mostly used in between long sentences and you briefly want to accent few words inside it.

    Other suggestions.

    1. Some padding is required on the sides on tablet sizes. Now it overflows.

    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.

    Marked as helpful
    0
  • bikeinman•1,080
    @BikeInManPosted over 2 years ago

    The design on desktop seems to be very close to the design. Congratulations.

    I have the following comments for you, if you will.

    You should not use div to wrap text. Div is mostly used to group of elements and to style it. .cardTitle, .cardP should be changed to standard html elements like h2 and p.

    Cards stretch the whole screen on smaller than desktop sizes. Try using max-width (about 300px) on your cards.

    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.

    Hope you enjoyed doing this challenge. For me, it took a lot of time and a lot of trial and error.

    Good Luck.

    Marked as helpful
    0
  • bikeinman•1,080
    @BikeInManPosted over 2 years ago

    Nice work, with the whole design in one grid.!

    1
  • bikeinman•1,080
    @BikeInManPosted over 2 years ago

    so cool..

    0
  • bikeinman•1,080
    @BikeInManPosted over 2 years ago

    Beautiful. Nice work as always.

    May be you can add a link to the logo and make 'Try it free' a little more interactive. It seemed to too subtle to be noticed.

    Link to your portfolio is a nice idea. :)

    Marked as helpful
    0
  • Nick OD•270
    @NickODxyzSubmitted over 2 years ago

    Hi all,

    I really enjoyed doing this one. I was expecting it to be really difficult to get my head around all the styling, but felt like it came pretty easy to me. Seems all the previous projects are paying off lol

    As always please leave any and all feedback.

    Thanks, Nick

    Chat App CSS Illustration | CSS Art

    2
    bikeinman•1,080
    @BikeInManPosted over 2 years ago

    Very cool. Matches the design almost 100%. How did you do that ? Whats your technique?

    0