Skip to content
Submitted almost 3 years ago

Fluid Width - Social Proof Section

Kunal Munda•200
@ryu-kamiski
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social proof section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Feedback are more than welcome!😊

Also I have some questions!

  • I have a first priority question is that where should the images be places? In the HTML file itself or the CSS file.
  • Please do explain me how to make the 5 rated section indentation.
  • Also I learned about max() min() clamp() and having trouble with how they are behaving with the layout.

Community feedback

  • Mounir Moutawakil•420
    @mounir-m4Posted almost 3 years ago

    you can easily reset your css style by : *{ margin:0; padding:0; box-sizing:border-box; } and a little bit of advice try to apply flexbox on this sample because is easier to align items and more responsive, compared with what have you done keep learning !

    Marked as helpful
    1
    Kunal Munda•200
    @ryu-kamiskiPosted almost 3 years ago

    @mounir-m4 you are right but for using flex you have to give width and height on the body which can be done but shouldn't.

    Which is because :

    • It causes some weird issues like you can get horizontal scrollbar or vertical scrollbar
    • also i have learned not to give height to elements because as it takes away the responsivness from the layout.
    • and for justify-content to work it needs a height (that's what I have experienced so far); align-items works like breeze no issues with it the problem lies in justifying the content.

    And thanks for the reply!

    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