Responsive 3 column preview card component

Community feedback

• 

  Isaac Prime•460

  @IsaacayomiPosted over 1 year ago

  The container is not responsive yet as it is not looking okay on larger screens. to make it responsive, .container{ display: flex; flex-direction:row; }

  then add other stylings like adjusting the attribution and all. this should help also

  0

  ---

  

  Andreas Ziegler•30

  @Andreas-Ziegler22Posted over 1 year ago

  @Ademide07 I just checked and they are kind of responsive can you be more specific, please? thank you for taking the time to look into my project

  0

  

  Isaac Prime•460

  @IsaacayomiPosted over 1 year ago

  @Andreas-Ziegler22 I mean, on larger screens, they have to sit side by side. flex direction should be row

  0

  

  Andreas Ziegler•30

  @Andreas-Ziegler22Posted over 1 year ago

  Thank you, Isaac, I just did I had 2 media queries and I set both with flex direction-row it was a nice observation.

  0
• 

  Vikash Maurya•310

  @VikashMaurya10Posted over 1 year ago

  Hello there 👋. You did a good job!

  • Hover on Button there is border so height and width increased of whole card. This is not well, you can do this

      background-color: $Very-light-gray;
      padding: 1.1875rem 2rem;
      margin-top: 1.875rem; // 30px;
      border: 2px solid $Very-light-gray;
      outline: none;
      font-weight: 400;
      border-radius: 30px;
      cursor: pointer;
      font-size: 0.8rem;
      transition: background 0.1s ease-in;
  
      &:hover {
          background: transparent;
          color: $Very-light-gray !important;
      }
  }
  

  • To understand better go to my solution maybe you can find it useful click here. I hope you find this helpful.

  0

  ---

  

  Andreas Ziegler•30

  @Andreas-Ziegler22Posted over 1 year ago

  @VikashMaurya10 Thank you I will have a look

  0