Skip to content
OverviewSolutions
21
Comments
3
KT
@KtGitIt

All comments

  • Mallory•120
    @azerroth11Submitted over 3 years ago

    Hi all, I'm happy with the overall result, especially having been able to change le layout for mobile/tablet and desktop. But I encountered a few issues:

    1)How do I make my content centered in the page ? I used a .main to put all my content into on which I set display: grid and place-items: center hoping it would help but it didn't. And margin:auto doesn;t seem to do it.

    1. How do I force my cards to be wider rather than higher while using grid-template-areas ?

    2. Can I make the content adapt to the container rather than the container adapt to the biggest content box ?

    Thanks a lot for any answer regarding those but also any suggestions to make my coding better overall !

    Mobile first, compatible tablet & Desktop

    1
    KT•390
    @KtGitItPosted over 3 years ago

    Hello Mallory 👋🏼,

    You did the great job on this. It looks good on various screen sizes. I will try to answer some of your issues.

    1. To make "main" div center, you need to give main container some kind of width. I would give max-width 1200px or something around that range and then change margin: 8-9rem auto and that should work. Play with it in dev tool in your browser!!

    2. Remove the min-width from card div and that will make it better.

    3)Once you have width(max-width) on your container then content box will adjust to it. I hope that is what you asking.

    Your code is easy to read but I would be caution using h2 before h1 for semantic reasons.You can do more research on semantic html and find out more about it.

    Best regards and keep coding, KT

    1
  • KT•390
    @KtGitItSubmitted over 3 years ago

    Greetings All,

    Any feedback will highly appreciated.

    I tried to apply "border radius" and "overflow-hidden" to main container for rounded corners but that did not work out in mobile layout. It didn't scroll down because of the overflow hidden so I ended up applying border radius to individual cards.

    Anybody has done it differently? Is there a other way?

    Best regards, KT

    Sass, Grid and Flexbox is used for this challenge

    2
    KT•390
    @KtGitItPosted over 3 years ago

    Hello Anna 👋 ,

    Thanks for taking a time to write feedback. This will help me improve more than you think.👍

    I also tried that border-radius issues and it worked just fine as you said. I don't know what happened there.😄

    I also fixed the attribution and max-width in mobile layout!! Thanks again..

    KT

    0
  • Luis•270
    @luibernipSubmitted over 3 years ago

    Hello community, thank you for passing by my challenge solution.

    My questions regarding this solution are:

    1. Do you think it is sufficiently responsive as it is or should it be more fluid?

    2. Should I set a max-width to the component as it was performed?

    Thank you again for taking the time and helping me improve in my web dev road.

    Have a great day!!

    Edit: Thanks to community observations; padding was reduced, headings increased size, images are no longer modified and body has a background.

    3 Column Preview Card Component (HTML + CSS)

    2
    KT•390
    @KtGitItPosted over 3 years ago

    Hello Luis,

    I think you did fantastic job on making it more fluid and more responsive.

    Here are my couple of observations. At this point it is just neat picking from design perspective.

    1. You can decrease padding in your cards.
    2. Heading should be little bigger and you applied width to the icons(imgs) which made them little small. I would not change with of those image.

    You code is easy to read and well organize. Good job. Keep coding!! KT

    1