sass. parcel, netlify pricing component with toggle

Community feedback

• 

  eagermonument81•210

  @ixtkPosted about 3 years ago

  body::before creates horizontal scrollbar on big monitor screens. Also, it appears that if I hover buttons on left or right, it affects the rest of them by adding 1px border

  Marked as helpful

  1

  ---

  

  kevin•415

  @imonaarPosted about 3 years ago

  @ixtk corrected. Thank you

  0
• 

  John•250

  @JohnBroersPosted about 3 years ago

  Nice working Kevin, looking great compared to the design. Instead of using pseudo elements to place the background images you can also use multiple background images on the body element using css. And then play around with the background-size and background-position properties to place the images correctly.

  body {
      background-image: url('/bg-top.5a64f221.svg'), url('/bg-bottom.d04b6899.svg');
      background-repeat: no-repeat;
      background-position: top right, bottom left;
  }
  

  And agreed with Iztk on the button issue. Try to add a transparant 1px border on the default state and give the border a color on hover, that should solve the layout jump.

  Marked as helpful

  0

  ---

  

  kevin•415

  @imonaarPosted about 3 years ago

  @JohnBroers Thank you! Letme correct

  0

  

  kevin•415

  @imonaarPosted about 3 years ago

  @JohnBroers updated. Worked instantly. Thank you again!

  0
• 

  kevin•415

  @imonaarPosted about 3 years ago

  Okay. is there a better way to add the background images without using the pseudoelements?

  The button border bothered me a bit but it was in the design. i was actually considering doing away with it

  0