Submitted over 3 years ago

Responsive - Four card feature section

Ivan Villarosa•55

@IMVillarosa

Preview site View code

This is a solution for...Four card feature section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

UPDATE: I have now centered the entire cards section without using a position absolute. The trick was to remove the height: 100vh on the section.cards > .container

I'm happy to have found a better solution! Feel free to let me know what you think about my finished project. Here is the CSS code that fixed and centered the entire cards section replacing my previous workaround position: absolute:

section.cards > .container {
    display: flex;
    width: 100%;
    justify-content: center;
  }

Community feedback

Candela Bramucci•680
@bramuccciPosted over 3 years ago
Hey, this is amazing! I like very much the shake effect. One thing is that in my desktop I see the cards in a column (like in mobile view), I couldn't figure out why this happen. And for more responsive experience, remove the height in card when you're in mobile. Also hyphenated the words with:

.squishy-text { word-break: break-word; /* Samsung browser */ word-wrap: break-word; /* IE 11 */ overflow-wrap: anywhere; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }

(see https://responsibleweb.app/) Keep going! This solution is so good
1
Ivan Villarosa•55
@IMVillarosaPosted over 3 years ago
@Liltanie heyy that's an issue I've also been trying to look into. I'm guessing you're using a Mac because I had it tested on a Mac that resulted to the cards stacked vertically on 1440px width.

Thanks for the inputs, I'll look into the link you've sent me and see the adjustment you suggested. Thanks! :)
0
Ivan Villarosa•55
@IMVillarosaPosted over 3 years ago
@Liltanie I found a fix. It was the @media only keyword. I looked up on w3schools and found the the only keyword prevents older browsers that do not support media queries with media features from applying the specified styles.

Do you have an older version of browser by any chance?
0
Candela Bramucci•680
@bramuccciPosted over 3 years ago
@IMVillarosa Hi. Nope, I have the last version of browser Brave, in windows 10. I see you fixed the media but now the title overlap with the cards 😅 this issues are weird And you're welcome!
0
Ahmed Faisal•5,095
@afrusselPosted over 3 years ago
Hi, nice work 😊. Responsive view also working well. The shake animation is good. Nice idea in hover effect. One suggestion, for font-size use rem not px. And use font-size css in body not in html.

Happy coding
0
Ivan Villarosa•55
@IMVillarosaPosted over 3 years ago
@afrussel Thank you! I will try to update my CSS file using your suggestion. Btw, the font-size was set to px unit as the style guide suggests the default should be 15px.

I might be a little confused with that one, but nevertheless, I'm currently reviewing my code :)

Thanks again!
1
Ahmed Faisal•5,095
@afrusselPosted over 3 years ago
@IMVillarosa Actuaaly now a days to support responsive view people are using rem for font-size. I know that the style guide is suggested 15px. Just convert the value of 15px in rem value and the result will be the same.

Hope that this is helpful for you.
1
Ivan Villarosa•55
@IMVillarosaPosted over 3 years ago
@afrussel I see. That does make sense. Thanks for clearing that up. I forgot about the equivalent values of the units but this is indeed helpful!
0

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