Skip to content
OverviewSolutions
8
Comments
9
Layiwola Tobi
@Laytix

All comments

  • P
    Clyo•180
    @clyo
    What are you most proud of, and what would you do differently next time?

    Happy I was able to use grid to get the layout somewhat resembling the intended design.

    What challenges did you encounter, and how did you overcome them?

    n/a

    What specific areas of your project would you like help with?

    Found it difficult to figure out how to size the relevant cards and how they should be positioned using grid. I ended up having to use margin to get them into the desired positions but not sure if this is the best approach since grid is being used.

    html css grid webpage

    1
    Layiwola Tobi•110
    @Laytix

    Good job on making it look good on the desktop, though there are issues with how it looks on any viewport smaller than 768px.

    Looking at your code putting the titleCard div in the same div as your grid just increases your headache. Put it outside so that all that you're dealing with would just be the card1-4.

    For the grid, you went with a 6(col) by 3(row). I would advise 3(col) * 4(row) instead, would make it easier to place supervisor and calculator in the middle, and learn about grid-areas. Trust me grid-areas would make your life way easier.

    In viewports less than 375 just plug this

    @media screen and (max-width: 376px) {
    main{
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
    }
}

    Youre doing fine mate, just need to responsive.

    Marked as helpful
  • Layiwola Tobi•110
    @Laytix

    Really good, almost like for like with the sample too.

  • Aleksander Zwoliński•120
    @alzwo1
    What are you most proud of, and what would you do differently next time?

    I would try to be more simple and better in class names.

    What specific areas of your project would you like help with?

    I know that there are some diffrences between my solution and project but the main objective for me was to understand how grid works.

    Grids responsive cards

    1
    Layiwola Tobi•110
    @Laytix

    Amazing job.

  • Layiwola Tobi•110
    @Laytix

    Pretty amazing. Looks so clean and impressed you got it done using flex instead of grid. Only minor issue is the spacing in the .card-column. A gap or margin should easily fix that.

  • Layiwola Tobi•110
    @Laytix

    Looks really accurate. Quite impressive would have to take a look at your code to learn from it.

  • Layiwola Tobi•110
    @Laytix

    Did a really good job.

  • Layiwola Tobi•110
    @Laytix

    The layout looks good and it is styled really accurately but responsive-wise wise it could be better. Could tell you went for a mobile-first design cause it looks good there but on the desktop it looks to be edging out of the main div. Simply relatively resizing it should help alot.

  • Wasiu Olaoti Sulaimon•20
    @sulaimonwasiu
    What are you most proud of, and what would you do differently next time?

    When I was able to fix a final piece of the card

    What challenges did you encounter, and how did you overcome them?

    No cahllenge

    Blog preview car challenge

    1
    Layiwola Tobi•110
    @Laytix

    Looks good, should have done something about the responsiveness of the profile avatar.

  • Dietcokes•20
    @Dietcokes
    What are you most proud of, and what would you do differently next time?

    Proud of tackling the challenge well enough

    What challenges did you encounter, and how did you overcome them?

    linking the given font with the project

    What specific areas of your project would you like help with?

    accurate sizing of given divs in the project

    flexbox

    1
    Layiwola Tobi•110
    @Laytix

    The design is great, the text should have be aligned center.