Order Summary Card Challenge

Community feedback

• 

  Adriano•38,270

  @AdrianoEscarabotePosted about 2 years ago

  Hi Tony, how are you?

  I really liked the result of your project, but I have some tips that I think you will enjoy:

  To prevent the background image from breaking at higher resolutions, we can prevent this in two different ways:

  1. Add a background-repeat: repeat-x;, the image will repeat on the horizontal axis, preventing it from breaking.

  2. Add a background-size: 100% 50vmin;, the 50vmin will set its height as the page target, and 100% will make it stretch on the horizontal axis.

  Feel free to choose one of the two!

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0

  ---

  

  Tony•50

  @Snorri967Posted about 2 years ago

  @AdrianoEscarabote Thanks for the help buddy!

  1
• 

  Candice•50

  @candiukPosted about 2 years ago

  Hi, well done on completing the challenge.

  • Placing your 'Order Summary' as an H1 and 'Annual plan' as H2 will remove the accessibility warning issue you're receiving.

  • The 'Change' link should not need or have the <p> wrapping the text inside the <a>. Remove the <p> or swap them around.

  • To achieve the hover effects, add styling with :hover. eg: button:hover { add your style } Here's a link to MDN's docs that you may find helpful.

  Marked as helpful

  0
• 

  Mounir KHAOUADI•190

  @Mounir-khPosted about 2 years ago

  Hello, for background desktop : I did this and it worked: Html :

  <div class="background-desktop"> <svg xmlns="http://www.w3.org/2000/svg" width="1440" height="437"><path fill="#D6E1FF" fill-rule="evenodd" d="M0 349.974c218.558 116.035 460.05 116.035 724.475 0s502.933-116.035 715.525 0V0H0v349.974z"/></svg> </div> CSS : .background-desktop{ position: absolute; display: block; padding-top: 30%; width: 100vw; margin-top: 0;

  } .background-desktop svg{ margin-top: 0; width: 100%; display: block; }

  Marked as helpful

  0