CSS and HTML

Community feedback

• 

  Tomislav Šuto•60

  @RetroApePosted about 5 hours ago

  Greetings Jean.

  It seems you had some trouble with the layout. I had a lot of trouble myself with the layout and making everything more responsive. Had to spend a lot of time to solve each issue.

  Looking at the design, the whole card has the same padding size inside the card. So the most efficient way is to give the padding to the card and remove margin/padding for the inside elements.

  The card is also missing margins on top and the bottom.

  One more thing; I wouldn't put the image inside an element (div in your case), but I would have the image be a direct child of the card element. I see you declared height: 100%, which is unnecessary. Just have image go 100% in width, and with previous padding being set up for the card, it would look closer to the design.

  There are a lot of things to learn. I have been following Kevin Powell these days on YouTube to; it helps to watch. Here are 5 tips for responsive layout from him, for example.

  Thinking about the first tip in his video, I would advise to go one step at a time when writing CSS. When you write something, check how it works. If the layout breaks, there must be something that can be done to fix it. That is how I worked on this project.

  This is not mutch, but I hope it helps your development.

  Best of Luck!

  0