3-column-preview-component-card

Community feedback

• 

  IRVINE MESA•1,835

  @DrMESAZIM

  Posted over 3 years ago

  hi @bacayo .To help you with mobile responsiveness of the site here are some steps I took

  1. In that fact I cant make changes to your GitHub code I downloaded the code first

  2. style.css line 29, line 34 , line 35 and line 107 remove everything

  3. style.css line 31 set height to 80%

  4.Add this media query at the bottom of style.css file or line 132

   @media screen and (min-width: 1000px) {
  

  .card {display: flex; }

  }

  let me know how this changes will work out

  01

  Marked as helpful
• 

  Yemisrach•1,430

  @Yemisrach15

  Posted over 3 years ago

  Hey Batuhan

  The mobile design looks ok. However, on the desktop the icons and buttons are outside of their section. Remove height: 50% on .card to correct it. As Samuel said above, only one element can have the same id in a page. Instead use classes to give multiple elements the same style. It's great that you've used semantic HTML👏🏾

  Happy coding!

  00

  Marked as helpful
• 

  Samuel M. Setiawan•200

  @samuelms21

  Posted over 3 years ago

  Hey there. You might want to add some padding to your columns and customize your right and left padding for your buttons. Here is how you can do it:

  1. Buttons : Instead of writing padding: 17px, you can write padding: 17px 30px. This will expand your x-axis padding (left and right) so your text can stay on the same line!
  2. Columns: You can add padding to your columns (all three of them) by writing

  .card > * {
      padding: 20px;
  }
  

  The code .card > * just means that you are selecting all child elements of the element with the class card.

  Also, I think your understanding of classes and ids might be a little off. You can only have an id for a single element. No other element should have that id. Classes however, you can use it for several elements in your HTML. If you want to have an id for every single column element you have, then you have to put different id names for every one of them.

  00

  Marked as helpful