Slider toggle-button interactive price

Community feedback

• 

  John Ademoye•235

  @Moyo75Posted over 3 years ago

  On moblie:

  • The two subtexts in the header are displayed inline, unlike in the design. Your <div class="price-box"></div> takes up the total width of the screen size. A little bit of margin on both sides might help here.

  • And contents of your <div class="bottom"></div> should be vertically displayed, not horizontally. Depending on your layout too, but since you used flexbox, flex-direction: column with some media query (or not) might help. Also, discount should not be visible; you can easily set display: none.

  General:

  • The circles in the background seem too shoved to the top; since you gave it an absolute position, you could try top: -12px and adjust the value till it looks like what you want. /month should be horizontally centered by the amount text; you could give it a class and hoist it up a bit with a negative margin-top. And the slider should align with the pageviews and amount text, just like in the design; you could increase the width but I think a percentage width relative to the size of <div class="price-box"></div> might help significantly but you'll probably need something extra with a media query.

  • The toggle button's state changes to false whenever the slider is change. I see not basis for this as far as the guides are concerned; I thinks toggle.checked = false; is responsible in the last line of your slider event listener.

  • The content of your <div class="billing"></div> isn't spaced out as in the design; I think it's because of the nesting in the last p tag, I suggest putting all four on the same level and trying justify-content: space-between. And the horizontal line should be as wide side as <div class="price-box"></div>; I think it's due to the padding of <div class="price-box"></div>; I don't see a way out without removing its padding, but that messes up everything. You might want to give its individual elements margins/paddings to look like the design.

  • You might also want to add the reference to yourself as the developer (it's your effort!) and also to FEM.

  I hope this helps make your app look and behave more like the design and style guide requirements. Lemme know what you think!

  1

  ---

  

  Andy•295

  @AndreanaPerlaPosted over 3 years ago

  Thanks for your feedback @Moyo75 , I'll fix it asap! I suppose i still have a lot to learn ;)

  0

  

  John Ademoye•235

  @Moyo75Posted over 3 years ago

  All right, @AndreanaPerla. But no rush, no problem even if it takes you several weeks or a few months to make it look and behave like in the guides. Take your time and ask questions if you don't know how to do a particular layout or app function. In doing so, you're making the most of this project. Well done!

  0