article-preview-component-master

Community feedback

• 

  Snigdha Sukun•550

  @snigdha-sukunPosted 4 months ago

  The tooltip in your solution looks amazing!!

  Your solution looks good on desktop but it does not look like the one provided when we switch to mobile view. You should try using @media to style your UI for different screen-sizes.

  @media (min-width: 768px) {
      main {
          flex-direction: row;
          width: 80em;
          padding-bottom: 0%;
          overflow: visible;
      }
  .
  .
  .
  }
  

  You can use @import in CSS file to import the required font-family:

  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
  

  You can use :root to define all the variables which will be used throughout the css file, and then reuse it everywhere:

  :root {
      --very-dark-grayish-blue: hsl(217, 19%, 35%);
      --desaturated-dark-blue: hsl(214, 17%, 51%);
      --grayish-blue: hsl(212, 23%, 69%);
      --light-grayish-blue: hsl(210, 46%, 95%);
      --font-family: "Manrope";
  }
  
  body {
      font-family: var(--font-family);
      color: var(--very-dark-grayish-blue);
      background-color: var(--light-grayish-blue);
  }
  

  0