responsive card using sass

Community feedback

• 

  Vinay Puppal•160

  @vinaypuppalPosted about 3 years ago

  Hey, looks good. Take a look below 370px,

  1. The card is touching the edges adding some padding around the card should fix it.
  2. The attribution text is overlapping with card

  Marked as helpful

  1

  ---

  

  Abdul•255

  @abdulrahman-rwimPosted about 3 years ago

  @vinaypuppal thanks for the note bro, maybe this is happening because of the container height, I looked at the design on my phone and everything is great but in the browser, it looks weird, can you help me avoid this problem

  0

  

  Vinay Puppal•160

  @vinaypuppalPosted about 3 years ago

  @abdulrahman-rwim Sure. Maybe remove container styles and move flexbox styles to body like

  body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
  }
  .container {
  /* remove-your-existing-styles */
  }
  

  If you want your attribution block to be at bottom of the screen then you can be .container take the rest of the screen height ignoring attribution block height like shown below

  .container {
      display: flex;
      min-height: calc(100vh - 100px); /* Here we setting container height take the rest of the screen height ignoring attribution block height */
      align-items: center;
      justify-content: center;
  }
  
  

  Marked as helpful

  1

  

  Abdul•255

  @abdulrahman-rwimPosted about 3 years ago

  @vinaypuppal thanks bro it worked 😊

  0
• 

  P

  Fluffy Kas•7,715

  @FluffyKasPosted about 3 years ago

  Hey, it's a great looking solution! Your alts aren't functional though. Here's this great article about the topic that I'm sure you'll find useful: (https://axesslab.com/alt-texts/)

  Marked as helpful

  1

  ---

  

  Abdul•255

  @abdulrahman-rwimPosted about 3 years ago

  @FluffyKas thanks for the note, and the article is amazing, I fixed the alt text

  0