Skip to content
OverviewSolutions
33
Comments
4

Spencer Runde

@spencerrundeCorona, CA640 points

Computer Science student at Southern New Hampshire University. Expected graduation date: October 2021

I’m currently learning...

React, Three.js

Latest solutions

View more solutions

Latest comments

  • Spencer Runde•640
    @spencerrunde

    Hi Mohammad,

    I just completed this challenge a couple days ago. I believe it is best to usually start with the mobile layout, and then use a media query for larger screens. Typically, you can make the necessary changes without writing too much css. For my try at it, I mostly just had to change the flex-direction inside of the card to row so the input and output boxes were side by side, and change my grid layout for the tip buttons from 2 columns to 3.

    Marked as helpful
  • Spencer Runde•640
    @spencerrunde

    Hello Ryan,

    Good job on the challenge! The most likely reason for the comparison looking slightly off is just minor differences in margin and padding styles, along with anything else relating to size. Don't worry about making it look completely identical, unless you're going for a pixel-perfect recreation. The only big difference I notice is that your "Learn More" buttons have a bigger margin-top than in the design. Nothing wrong with putting your own spin on it though, and I do like how the buttons look at the bottom of the cards instead of directly below the text.

    Marked as helpful
  • Spencer Runde•640
    @spencerrunde

    Hello Willy,

    To center the container class vertically, you can remove the top and bottom padding from the body class. Then, add justify-content: center; to the main class. Looks great!

    Marked as helpful
  • Spencer Runde•640
    @spencerrunde

    Hey Claydson!

    To stop the background image from repeating, add background-repeat: no-repeat; to your stylesheet, in your body tag. There are other properties you could try out too, such as background-size.

    Marked as helpful