Skip to content
OverviewSolutions
15
Comments
21

Adam

@aemann2Berkeley, CA430 points

Librarian learning to code!

Latest solutions

View more solutions

Latest comments

  • Adam•430
    @aemann2

    This one is spot-on...the closest one I've seen to the sketch so far. I'm going to study yours. Great job!

    Marked as helpful
  • Adam•430
    @aemann2

    It looks like the background image for your desktop version isn't quite taking up the whole page. You can fix this by setting min-height on your body element to 100vh instead of 100%, and adding background-size: cover to your body selector.

  • Adam•430
    @aemann2

    For the social icons, I made the right side of the page its own div, set the height to 100vh, and made it flex container. Then I put a wrapper around everything except the social icons:

      .main {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .flex-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

    As you can see, I set the flex to 1 for the wrapper. I wrapped my icons in their own div within .main, and because they're a flex child of the .main container, I set their flex property to 0 and used flex-end and margin to align them:

        &__icons {
      flex: 0;
      align-self: flex-end;
      margin-right: 5rem;
    }

    Setting their div to flex: 0 is the key to making this work: it causes the .flex-wrapper container to expand and pushes the icons down to the bottom of the page. You can take a look at my code if you want more clarification.

    Also, for your body element on your desktop, add in background-size: cover. This will make your background image cover the entire page.

  • Adam•430
    @aemann2

    I'm not sure how long you've been coding for, but it's smart that you're using min-width media queries. I've been coding for around 9 months and I only just started doing that in the past few months. It's made styling so much easier to do the mobile styling first, then scale up to the desktop.

  • Adam•430
    @aemann2

    Very nice job -- I like how you set the width for your form to a max-width so it doesn't get unnaturally large when you're scaling up to desktop size. One thing I'll suggest is that when you write your CSS, put your media queries in their own section rather than putting them in the individual classes. It's quicker to look for the screen width you want when you're changing a mobile style, rather than having to know the width in the specific class name.

    You've pretty much got it with your Javascript. In my solution, I basically did what you did, but with a forEach loop because I got tired of writing everything 4 times. You can actually cut down on your Javascript some by taking the error img out of your HTML and setting a background-image on your form fields with JS. Check my solution to see what I'm talking about.

    I checked your accessibility issues, and it looks like what you have should clear those. I had the same problem when I submitted mine, and I also fixed it by adding aria-label.

  • Adam•430
    @aemann2

    Smart that you divide the main content into two halves, then have the content fill up the vertical space by using height: 100vh . I had a lot of trouble figuring out how to organize my content for the desktop, so your code gives me an idea of what direction to go in when I overhaul my solution.

View more comments