3-column preview card using CSS Flexbox

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  • for your question on the .btn put a border as transparent with the same dimension as when hovered. eg border: 2px solid transparent; So when hovered its only the color that changes

  Marked as helpful

  1

  ---

  

  Fahim Mahmud•165

  @FahimMahmudJoyPosted over 3 years ago

  @ChamuMutezva That was some solution! It worked. Thanks a lot!

  0
• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted over 3 years ago

  There is still some work to be done , the display is not close to the design.

  • i haven't bothered to look at desktop first since i started enjoying mobile first. Mobile first can help you to have less css code. @media (max-width: 1440px) and one of the code looked like the one below:

    main {
          display: flex;
          flex-direction: column;
          width: 300px;
      }
  

  since the flex container is 300px wide , the one column will stretch up to a maximum width of 1440px making it difficult to match the design on desktop.

  • change the media query to a max-width of about 50rem - and before i continue use rems instead of px.
  • remove the fixed width from the following

  main {
      display: flex;
     /* width: 800px; //remove this fixed from all its declaration
      min-height: 600px; */
  }
  
  

  • set a max-width on the card instead of the flex container

  .sedan,
  .suv,
  .luxury {
      padding: 60px 40px;
      max-width: 327px; // just demo
  }
  

  that should give you a layout like from the design. Use flex methods to keep the site centered

  0