Skip to content
Submitted over 3 years ago

HTML, CSS using flex and position

Anitha•60
@Anitha-vpk
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.. Feedback Needed.!! It is not completely responsive. I'm unable to change the width of the cards 1 and 4. I know when the display: flex and only if the flex-direction: column , the width can be changed. I don't know where I went wrong with respect to the width of the cards. Help me out..

Thank you

Community feedback

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    Well set you browser to 375px wide and you will see your cards are not the same width and two are shrinking way too much when compared with the other two

    0
    Anitha•60
    @Anitha-vpkPosted over 3 years ago

    @palgramming Exactly, That is where I would like to know what did I do wrong. I tried everything I know but still couldn't manage to find the solution

    0
    Patrick•14,265
    @palgrammingPosted over 3 years ago

    @Anitha-vpk well you should maybe put a common class on all of your cards with width and height so all the cards will be the same size. Also Grid Template Areas make it easier to layout the cards. In the Resources tab here there is a Free Course on CSS Grid by Wes Boss that is pretty short and really good

    0
    Anitha•60
    @Anitha-vpkPosted over 3 years ago

    @palgramming Thank you! I have given common class for all the cards and I have used flexbox. Let me check on the CSS Grid.

    0
    Patrick•14,265
    @palgrammingPosted over 3 years ago

    @Anitha-vpk if you look at your css you will see you have different % widths on your cards. Look at your cards using the development tools in the browser and inspect each card hopefully you will see the differences in your css properties

    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