Skip to content
Submitted almost 3 years ago

Four cards grid and responsive queries

Giovanni Beccaro•160
@Gioltek
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Hello! This is my first project after one week of learning html and css, and it's been a blast so far! I learned a lot thanks to this challenge, especially some neat grid related stuff and responsive tricks to adjust the site accordingly to a device's screen size. I really liked the challenge overall and I suggest it to other html and css beginners, it is amazing! Some of the stuff I found hard to achieve: correct grid setup, grid centering. Two things I know are incorrect: I have put the icons at the end of the box using margins, but this causes a problem regarding their position in relation to the description: if the description is one line long, the icon is shown higher in the box; if the description is two lines long, the icon is shown lower. I know there is some kind of fix to this, probably I shouldn't have used margins but something else. The other incorrect thing is the height of the page. I would've liked the page to not be scrollable, and instead be just a single page, but probably I got my sizes wrong and the page is now scrollable. I could've fixed it readjusting all the sizes, but I couldn't be bothered. Is there something easier to fix this issue? Thanks for your time!

Community feedback

  • Martin Eliáš•890
    @martinelias1312Posted almost 3 years ago

    Hello Giovanni @Gioltek, i see that you have done a great job after one week of learning!

    The positioning of the picture i did like this:

    • wrap <img> element in <div class="img-wrap"> with class img-wrap
    • and CSS: flexed it
    .img-wrap {
    display: flex;
    justify-content: flex-end;

    And the page with scroll bar ? It´normal like David said. Hope this will help you with another options how to position your image :)

    Marked as helpful
    1
    Giovanni Beccaro•160
    @GioltekPosted almost 3 years ago

    @smradupan Thanks Martin, both for the feedback and the heads up about how you positioned images, really appreciate it!

    0
    David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    @smradupan That is a great tip. I have found that images don't always act the way you would think in Flexbox. I have started putting them in divs and they seem to act "normally" now.

    1
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    This looks good. It only scrolls at small screen sizes which is normal because of the height of the content. I used margins to move the image to the right side. Everything works, you can just play with the spacing of the elements. I would continue on with another project. You can always go back later if you come up with some things to try out.

    Marked as helpful
    0
    Giovanni Beccaro•160
    @GioltekPosted almost 3 years ago

    @brodiewebdt Thanks for your feedback David! I'm definitely going to start a new challenge and see how it goes.

    0
  • David Turner•4,150
    @brodiewebdtPosted almost 3 years ago

    I have learned a lot from doing these challenges. I am able to solve problems I couldn't have a couple of months ago.

    0
    Giovanni Beccaro•160
    @GioltekPosted almost 3 years ago

    @brodiewebdt True, I'm also seeing myself improve a lot thanks to them, they really test your capability to solve a problem and find solutions, it's a really nice project.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord