Social Links Profile (2)

Community feedback

• 

  P

  John McNichol•150

  @inappdesignPosted 14 days ago

  This may not be the best practice but it works for me. I use rems for almost everything but to make rems easier to use I reset the rem value so 1 rem = 10 pixels. You can do this in CSS using the following html tag:

  html {
  font-size: 62.5%;
  }
  

  This will change the value of 1 rem to be 10 pixels (instead of 1 rem being 16 pixels by default). So for example, if you want your font size to be 16 pixels and you have done the above, you will just need to type:

  body {
  font-size: 1.6rem;
  }
  

  Same for the size of an element, I would just type 3.5rem instead of 35px. But, if you want to use rems for media queries, these rems will still be 1 rem = 16 pixels, the 62.5% method I use above won't change the media query rem size, it stays at 1rem = 16px no matter what. So a media query for min-width of 768px would actually look like this:

  @media (min-width: 48rem) {
  /* your CSS here */
  }
  

  In other words it is: 768px / 16 = 48rems.

  As specific feedback for this challenge, you have done a great job, it is very close to the design. All I would add is a cursor pointer to the button and a transition for the hover state:

  button {
  cursor: pointer;
  transition: background-color 0.3s;
  }
  

  And a hover state for the button:

  button:hover {
  	background-color: hsl(75, 94%, 57%);
  	color: hsl(0, 0%, 20%);
  }
  

  As for getting the right screen sizes for media queries, I have started using this site to get the right breakpoints for mobile, tablet and desktop. This site was suggested to me on my most recent "Meet landing page" challenge. I recommend you check out my files for this challenge. You will find the 62.5% in the reset.css file, and the breakpoints I used in the style.css file.

  0