Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Sass, Grid and Flexbox is used for this challenge

KT 390

@KtGitIt

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Community feedback

KT 390

@KtGitIt

Posted

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
Anna Leigh 5,135

@brasspetals

Posted

Hi, KT! 👋 Congrats on completing another solution! Overall, good job with this one.👍

Not sure why you're having the border radius issue, because when I remove the borders from your cards and apply a border-radius and overflow: hidden to your container in the dev tools, it works for both mobile and desktop. Perhaps you've changed some things in your code since you tried it? 🤔

Speaking of mobile, your attribution gets positioned at 18% from the bottom of the viewport height, so typically right on top of your cards. I suggest removing the absolute positioning and just giving it some bottom padding or margin, or lowering the percentage.

I'd also lower the min-width on the main (or remove it entirely), since at 375px the component fills the entire screen (in the design there's some space) and on smaller mobile screens (i.e. iPhone SE which is 320px), the cards overflow the viewport. Rather than a min-width, I'd actually suggest a max-width for your mobile layout so that the cards don't get too stretched on medium styles.

Hope these suggestions are helpful - and happy coding! 😄

0

Please log in to post a comment

Log in with GitHub
Discord logo

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