Product Preview Page

Community feedback

• 

  Justin•120

  @andrew-j-brownPosted 6 months ago

  Hi Dolapobj!

  Looks good, and the site looks perfect for mobile! Good job with using Scss as well, I didn't use it for much more than color variables lol.

  The only difference I saw was the sizing of the desktop card. I really struggled with this part of the challenge myself - the easiest way I could find to format it was to style just the aspects that don't affect layout, such as colors and fonts, and then style the layout for each screen width separately. I didn't do this the first time around, and the mobile styling ended up really messing with my desktop layout.

  Here's some relevant parts of my css:

  /* universal styling */
  ...
  
  /* layout styling */
  @media (max-width: 48rem) {
  /* Structures the layout of the mobile card*/
      .product-info {
          display: flex;
          flex-direction: column;
          gap: 1rem;
      }
  }
  
  @media (min-width: 48rem) {
  /* structures the layout of the desktop card*/
      .product-card {
          max-width: 580px;
          flex-direction: row;
      }
  
      .product-info {
          width: 90%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
      }
  }
  

  Also, don't forget to add hover styling to your buttons!

  .product-button {
      ...
      background-color: $dark-cyan;
      color: $white;
  
      transition: 0.2s opacity;
  }
  
  .product-button:hover {
      opacity: 0.85;
      cursor: pointer;
  }
  

  Sorry for the wall of text lol - Hope this helps and have a great day!

  0