Skip to content
Submitted almost 3 years ago

React Spilt Page using Styled Component and CSS Flexbox

Genie Wu•20
@geniewu007
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is there a way to make the logo sizing closer to the mockup? I experimented but still couldn't get it to look smaller.

Community feedback

  • Rosi•440
    @strosiPosted almost 3 years ago

    Hi Genie! I have no much experience using styles with React so I'm just guessing. Try to change the logo style:

    @media (max-width: 768px) {
    max-width: 100%;
    height: auto;
}

    with

    min-width: 8rem;
width: 100%;
max-width: 13.5rem;

    or with

    width: clamp(8rem, 15vw, 13.5rem);
    1
    Genie Wu•20
    @geniewu007Posted almost 3 years ago

    @strosi Thanks. Will definitely give it a try!

    1

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