Spencer Runde

Latest comments

• 

  Mohammad Ashir•140

  @A-shir1Submitted over 3 years ago

  

  Tip Calculator App using HTML CSS and Vanilla JavaScript

  1

  10
  

  Spencer Runde•640

  @spencerrundePosted over 3 years ago

  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

  1
• 

  Ryan Cruse•130

  @Cruse180795Submitted over 3 years ago

  

  Responsive 3 Column Preview Card

  2

  20
  

  Spencer Runde•640

  @spencerrundePosted over 3 years ago

  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

  0
• 

  Willy Fajar Ramadhan•360

  @wllyvxSubmitted over 3 years ago

  

  Responsive using CSS grid

  1

  10
  

  Spencer Runde•640

  @spencerrundePosted over 3 years ago

  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

  0
• 

  claydson•20

  @sicklexSubmitted over 3 years ago

  

  Flex box

  2

  10
  

  Spencer Runde•640

  @spencerrundePosted over 3 years ago

  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

  1