Submitted almost 3 years ago

Four cards grid and responsive queries

Giovanni Beccaro• 160

@Gioltek

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

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

@martinelias1312

Posted 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

Giovanni Beccaro• 160

@Gioltek

Posted almost 3 years ago

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

David Turner• 4,150

@brodiewebdt

Posted 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.

David Turner• 4,150

@brodiewebdt

Posted 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

Giovanni Beccaro• 160

@Gioltek

Posted almost 3 years ago

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

David Turner• 4,150

@brodiewebdt

Posted 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.

Giovanni Beccaro• 160

@Gioltek

Posted 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.

Please log in to post a comment

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