Skip to content
Submitted almost 3 years ago

Social proof page

Usman•350
@awwsman
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

hey frontiers, I messed up a bit in the mobile design, if someone could kindly suggest some ways to make look as similar to the original design given GRACIAS. p.s : i'm enjoying these challenges, it help me to brush up my newbie skills and also learn new properties along the way

Community feedback

  • Byron•2,290
    @byronbyronPosted almost 3 years ago

    Hello

    You're implementation looks good.

    For mobile, I would remove the min-width on the body

    @media screen and (max-width: 1374px) {
    body {
        min-width: 1370px;
    }
}

    and then center it on mobile with this. max-width: 350px, margin-left: auto and margin-right: auto;

    @media screen and (max-width: 1374px) {
    .container {
        max-width: 350px;
        position: static;
        margin-left: auto;
        margin-right: auto;
    }
}

    Also, the transform: scale(0.9); on the <body> on mobile is a bit odd, although it's fine really.

    Marked as helpful
    0
    Usman•350
    @awwsmanPosted almost 3 years ago

    @byronbyron woow thank you soo much for your insights. I will surely put your comments to use.🙌👍 and about the "transform,scale"😂😂😂, i actuatlly wanted the h1 tag of the content heading to be lesser in size without disrupting the way it is shaped, like a V-shape to look exactly like the sample given, i tried reducing the font size but the shape got disrupted, so I just used the "transform:scale propery", however what other properties can i use to achieve the same? THANKS A LOT

    0
    Byron•2,290
    @byronbyronPosted almost 3 years ago

    @awwsman Ah that's fair. The transform: scale; is not wrong, as it does what you you want it to.

    If I was to suggest something, it would be to reduce the title font size a touch (font-size: 2.25rem;) and use max-width to get it into a v shape and margin: 0 auto to center it. Something like:

    @media screen and (max-width: 1374px) {
    .content-heading h1 {
        font-size: 2.25rem;
        line-height: 1;
        width: 100%;
        text-align: center;
        max-width: 350px;
        margin: 0 auto 1.5rem;
    }
}
    Marked as helpful
    0
    Usman•350
    @awwsmanPosted almost 3 years ago

    @byronbyron alright, i will try that as well

    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