Testimonials-slider. Spaghetti code and all sorts of disaster

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted about 4 years ago

  Hey, Artem Ponomarenko! 👋

  Good work! 👍 Your solution looks good!

  In addition to the great feedback from rfilenko, I suggest,

  • Setting min-width: 100vh on the body so that it's always at least as tall as the viewport (and the SVG background image will then always be at the bottom of the screen).
  • You can also use overflow-x: hidden to get rid of the horizontal scroll bar on smaller desktop screens.
  • Adding a small hover state to the buttons might be a nice touch!

  Keep coding (and happy coding, too)! 😁

  2
• 

  Roman Filenko•3,335

  @rfilenkoPosted about 4 years ago

  Hi Artem, you did a great job, mobile looks ok, just a few edits will help with issues you encoutered. You're right about hard-coded values and funky ones like padding-top: -49.589%" - try to avoid them, so my suggestions:

  • first, set box-sizing: border-box for all elements with * selector;
  • don't use fixed values, on containers, for example set max-width, like 1200px;
  • for images it's ok to set width and height, additionally object-fit will help to preserve proper picture proportions.

  Usually, it's better to start with mobile-first approach and then add needed changes with wider viewport width.

  Hope this was helpful😉. Good luck with edits.

  Cheers, Roman

  2

  ---

  

  Artem Ponomarenko•365

  @ArtemPonomarenkoPosted about 4 years ago

  @rfilenko

  It does help, thanks! Do you know any good reads or some articles maybe about this?

  0

  

  Artem Ponomarenko•365

  @ArtemPonomarenkoPosted about 4 years ago

  @rfilenko

  OMG ! This "box-sizing: border-box" is a game changer!!!! Thanks a lot!

  1

  

  Roman Filenko•3,335

  @rfilenkoPosted about 4 years ago

  @ArtemPonomarenko nice, basically it really depends on a subject. MDN, css tricks, other webs dedicated to frontend have a lot of articles about different topics.

  0