Skip to content
OverviewSolutions
3
Comments
8
Rohit Kumar
@rohits673

All comments

  • Rohit Kumar•125
    @rohits673Posted over 3 years ago

    Hi, I checked your site its looks accurate on desktop version, still you can improve it for medium sized devices and mobile as on both of it looks really small due to too much space around also you should avoid fixed width of .card components also as you are using flexbox you can use it in .container to centralize your card instead of using transform:translate(-50%,-50%); you can use responsive unit like vh for deciding height for the .card divs. For more clarification please check my solution an please let me know if there is any improvement i can do there. Thanks!

    0
  • Talal Qamar•30
    @TalalQamar99Submitted over 3 years ago

    This is my second challenge in two days. I really like working on such challenges because it gives me a chance to apply what I have learned on real world challenges. I am still using basic concepts. Any feedback which would help me improve my skills would be appreciated.

    CSS, CSS Flexbox,HTML

    2
    Rohit Kumar•125
    @rohits673Posted over 3 years ago

    Hi Talal, you site is looking good and very accurate also. You can do some improvement as you cards are not centralized vertically you can use flexbox or grid like this

    body{
min-height:100vh;
display:grid;
place-items:center;
}

    It should centralize any container inside the body, let me know if it works. also around 500px width you card contents gets overflowed you can try to fix that or you can change your media breakpoint to around 768px.

    Hope It helps you. Thanks!

    0
  • Talal Qamar•30
    @TalalQamar99Submitted over 3 years ago

    I have recently started learning front-end development. I was never able to learn programming without doing a project and frontendmentor seemed a great place. After learning basic HTML and CSS I did this challenge and learned a lot along the way. I am open to any sort of feedback which would help me improve my skills. I was not able to create the exact due to my limited knowledge of html. I would appreciate if anyone guides me on my short comings.

    CSS ,CSS Flexbox, HTML

    2
    Rohit Kumar•125
    @rohits673Posted over 3 years ago

    Hi, Your site looks better on desktop version, nice work there👍. But you can improve it for medium sized and mobile devices, you can use responsive units for margin and text-align:center at mobile devices. also, for the background image as @Liem said I would like to add that you can also use background-blend-mode:multiply; with given bg-img and color. For more clarification you can check my solution and let me know if I need to improve something there. Thanks!

    0
  • Rohit Kumar•125
    @rohits673Posted over 3 years ago

    Hi, Your site looks good, also your desktop version is accurate nice work👍. You can try to improve it for medium width devices as there is gets too much left-right margin. so you can try responsive margin(like % or vw)

    .car {
width:
    height: 430px;
    padding: 3rem;
    margin: 0 10%;
}

    or create a div container with max-width:960px; for elements with class ".car". for more clarification please check my solution. Thanks!

    Marked as helpful
    0
  • William Nicholson•75
    @Passenger89Submitted over 3 years ago

    I am open to discussion and for other members of the community to offer feedback. I hope that you can:

    • Offer constructive criticism.
    • Share ideas.
    • Engage with others.
    • Welcome others and are open-minded. Remember that this is a community we build together 💪.

    Please take a look at the code and let me know what you think.

    Mobile first solution to 3-column-preview-card using HTML & SASS.

    1
    Rohit Kumar•125
    @rohits673Posted over 3 years ago

    Hi, I checked your site its looks good, nice work👍. There is some improvement you can try like around 500px device width your buttons gets horizontal overflow, so you can try responsive size for buttons or font-size or margin at this point as things get closer. Also please checkout my solutions for any improvement or issue. keep coding. Thanks!

    0
  • Rohit Kumar•125
    @rohits673Posted over 3 years ago

    Hi, Your Site look good, Nice work👍, here you can play a little with media screen breakpoints as on medium sized device its not looking best around 480px to 768px width, also you can try to match font-styles as same as the Challenge. Anyway keep coding, Thanks!

    Marked as helpful
    0
  • Rohit Kumar•125
    @rohits673Posted over 3 years ago

    Hi, you site looks nice, there is some minor improvement you can try like for for media screen take '768px' as breakpoint it will solve your issue also you can minimize your css code as you use only: .learn-more:hover{ background-color: transparent; color: white; } it will work for all three buttons also you can remove your hover effect from button paragraph. For more clarification you can check my solution and please let me know what I can improve in my code. Thanks!

    1
  • Rohit Kumar•125
    @rohits673Posted over 3 years ago

    Hi, I checked your site its looking nice, you can improve the style of buttons as it grows on hover(just give them border of same as background color and on hover change background color only) also if you will not use flex-wrap it will look better on medium sized devices and last please avoid fixed margin...for more clarification you can check my solution and also please give me feedback if there is something I can improve there. Thanks!

    0