Mobile-first responsive slider

Community feedback

• 

  Ovidiu-Antonio•3,125

  @ovidiuantonioPosted almost 4 years ago

  Hi Seo Kim,

  Even if you didn't required feedback I saw you solution and is pretty good. You did a nice job!

  I have a few tips which you can apply to improve the solution:

  1. for the wrapper:

     • replace the width: 75vw with width: 75rem; , on a bigger screen the text and the image are not in the center anymore, that's why a fixed width works better, to keep the content in one fixed area
     • you can get rid of the max-height property as the height of the wrapper modifies as the height of the elements inside it modify.

  2. for the imageBoxPosition:

     • you can add the button inside this div to keep it in one place, you can add position: relative to the div and then absolute position the button (i gave this values and it looks pretty nice : bottom: -2rem; and left: 2rem; ,but make sure to remove overflow: hidden; from the div if you apply this tip)
     • to be easier for the user to click on the button you can add the event listener to the previewBox and nextBox, not just to the arrow image
     • you can add the purple image in the back with an image element instead as a background-image; you can add it in this div and give it position: absolute; and z-index: -1; properties and the svg will always stay behind the photo

  3. testimonial text:

     • don't forget to add the proper font-weight for this text

  That's all I think, in rest all good, the mobile version looks good and you did a very good job with js too.

  Happy coding and keep going! Fighting!

  0

  ---

  

  Seo•100

  @ksyksy815Posted almost 4 years ago

  @ovidiuantonio Hello again! :) Thanks for the detailed review. You just pointed out exact things that I was struggling with - the width of the wrapper, still-undecided preference of units (sadly), and background image that is just so happy to get its liberty free from my control...haha... And of course, the font-weight as well. I will look into this project again and make it look better!! Thanks for the comment!

  0