3-column-preview-card-component-main using html css responsive

Community feedback

• 

  Gareth•410

  @Gareth-MoorePosted over 2 years ago

  Hey bro,

  So what I can see that I think would be beneficial to you are:

  1. HTML semantic tags that are more descriptive. Instead of div1, div2 etc. you could have .card-container-item or something descriptive. Just for when you come back to something it could take quite a while to figure out what's going on and especially for others reading your code. It's easy on this small scale but will get difficult with bigger projects.
  2. Your background color isn't right. Although that's a small fix.
  3. With your div1, div2 and div3 containers you can add padding to make everything fit nicely instead of changing each elements margins. Also you could use flexbox to push the button to the bottom of the <div> using justify-self: flex-end; which looks far better because as you resize your screen the buttons jump up and down.
  4. Between mobile and desktop viewport sizes your card stays on the left side. Using a max width on the container and then setting side margins to auto will make the card centred on the screen as you increase the viewport width.

  Well done though man, I hope this was helpful. You can take a look at my code and see if that helps. https://gareth-moore.github.io/Frontend-Mentor-projects/Newbie/3-column-preview-card-component-main/index.html

  Thanks, Gareth

  Marked as helpful

  0