Submitted almost 2 years ago

Gird-Layout excercise

Daniel Dekany• 920

@dknyd

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

Hey Peeps,

I finished another project, I think compared to my skill the end result is not that bad, I would have 2 questions which I couldnt figure out on my own:

How can I make the text on the top of middle column to flow beyond the edges of the column? - as seen in the design picture, the left and right edges of the text is further away from the middle than the left and right edges of red and orange container.

Also, why is the screenshot in the solution so weird? The original design to which it compares seems like its super zoomed in, did I miss something? - other projects' previews did not look like this for me.

Many thanks in advance as usual! :)

Daniel

Community feedback

Petabyte• 190

@peta-8-bit

Posted almost 2 years ago

Hey! good work with the challenge.

I was reading your comment for this challenge, I am not sure if the middle column actually has text occupy more width than the other columns. It looks same to me. However you can adjust it with padding-left and padding-right with a class name like .middlecolumn or whatever.
The Screenshot is zoomed in to match the aspect ratio (to make side by side comparison)of your page which is more than 100vh so your webpage is zoomed out and the comparison is zoomed in(instead of the normal landscape view + lot of white space). I suggest you make the page height to be at-most 100vh

Overall i would suggest that you try to stick to the given design(height, heading width is way too narrow on desktop view). Otherwise it is a well done challenge.

Happy Coding ╰(°▽°)╯

edit:Changed margin-left and margin-right to padding-left and padding-right.

Marked as helpful

Idiagbon Saadu Abdulrahman• 350

@sulyman09

Posted almost 2 years ago

@peta-8-bit noted, thanks for the advice.

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