Responsive and interactive page using HTML, CSS and Vanilla

Community feedback

• 

  vincent•120

  @kikiklangPosted over 2 years ago

  Hey, some few tips. I just made this challenge and found a way to get this quotes right.

  .advice-sentence::before { content: "\201C"; } .advice-sentence::after { content: "\201D"; }.

  Also, you wrote a function in JS to get the divider svg right. You can avoid that , simply do the following in your HTML

  <picture> <source media="(max-width: 576px)" srcset="./pattern-divider-mobile.svg" /> <img class="advice-divider" src="./pattern-divider-desktop.svg" alt="a divider" /> </picture>

  overall, your design is great, however your javascript could be simpler. gg.

  Marked as helpful

  1

  ---

  

  Felipe Stefani•330

  @felipestefaniPosted over 2 years ago

  @kikiklang I got stuck exactly in those steps! The quotes I couldn't resolve by my self, but the divider that was the way I found to fix. I was thinking in a way to change through CSS, but couldn't imagine. Thanks a lot for the solutions!

  1
• 

  Rohit Sharma•160

  @dev-rohit0Posted over 2 years ago

  Everything is good. A simple suggestion , in mobile device the advice card is taking 100% width so you can use something like width:calc(100% - 3rem). So there is always a space and it looks a bit better.
  In desktop mode, everything is perfect. Overall you done a great job

  Marked as helpful

  1

  ---

  

  Felipe Stefani•330

  @felipestefaniPosted over 2 years ago

  @dev-rohit0 Thanks for your help. It indeed gets better in the project. I'm a free user, so I don't received the sketches. I thought the card had some margin based on the design. Once, again, thank you!! ☺️

  1