Responsive Landing Page

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hi there! 👋

  Good effort on this challenge! 👍

  About the background image, I would recommend setting the size as 100% and positioning it on the top. I notice that you override the background shorthand styling, specifically the background-size and the background-position which you don't need to do.

  I used flexbox for the Annual Plan part or in this case, the order-item however, you can use grid if you want. I would recommend choosing either grid or flexbox over absolute positioning.

  Alternative text for images should not contain any words that related to image (e.g. picture, photo, logo, icon, graphic, avatar, etc). It's already an image element so the screen reader will pronounce it as an image.

  Also, the music icon is also a decorative image the same as the illustration. So, leave the alt empty.

  On mobile view, to be specific 360px * 640px. the buttons are overflowing from the card element. It's because of the width that are specified on them.

  That's it! I hope this information is useful! 😁

  Marked as helpful

  0

  ---

  

  MightyKale•40

  @MightyKalePosted over 2 years ago

  @vanzasetia Thank you for your detailed advice, I will look into them and make modifications!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @MightyKale You're welcome! 😄

  0

  

  MightyKale•40

  @MightyKalePosted over 2 years ago

  @vanzasetia Hi, I made changes to everything you've addressed and it worked like a charm. I am especially amazed by how easy it is to set the background image just by changing the size to 100%. I changed the buttons to be responsive as well. Thank you so much again.

  1

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @MightyKale Your solution looks better now. The button is no longer overflowing from the card. Great job with the updates! 👍

  0
• 

  Rehman•280

  @Abdurehman420Posted over 2 years ago

  give the container the width you want, since the image is inside the container give it 100% width, it'll take the full width of the container . as for the annual plans and stuff you should use flexbox, its the best way!!

  <div class = "plan container"> <div class = "leftside"> <img class = "music icon"> </img> <div class = "plan details"> <h2> Annual plan <h2> <p> $59.99</p> </div> </div> <div class= "right container"> <a href="#"> </a> </div> </div> now give the plan display flex,justify-content : space between ,just like that do the rest. i hope this helps!!!

  Marked as helpful

  0

  ---

  

  MightyKale•40

  @MightyKalePosted over 2 years ago

  @Abdurehman420 Thank you! I will look into that!

  0