I0 have used CSS properties to have page responsive

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @varunKumar993,

  Congratulations on successfully completing the challenge!

  Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful:

  1. Background Colors:

     • The background colors of the body and .container elements do not match the design. Make sure to use the exact colors specified in the design.

  2. Responsiveness:

     • Your website is not responsive below 500px. This issue arises due to the fixed width of 500px given to the .container and table elements. To solve this, you can use max-width instead. This will set a maximum width of 500px for your elements and will automatically reduce the size if the screen size is smaller than 500px.

     Example:

     .container, table {
         max-width: 500px;
         width: 100%;
     }
     

  3. Background Color for .preparation:

     • The .preparation section is missing its background color as per the design. Make sure to add it to match the design specifications.

  4. Font and Font Sizes:

     • Ensure you use the fonts and font sizes given in the style guide to make your solution more accurate to the design.

  5. List Styles:

     • The ul bullets and ol numbers should have specific colors. You can achieve this by using the ::marker pseudo-element.

     Example:

     ul::marker, ol::marker {
         color: #specifiedColor;
     }
     

  6. Layout Using Flexbox:

     • Instead of using margins to separate each section, consider using Flexbox for better alignment and spacing. Flexbox provides a more flexible and efficient way to layout, align, and distribute space among items in a container.

     For more information on Flexbox, you can check out these resources:

     • W3Schools Flexbox
     • MDN Web Docs Flexbox

  I hope you find this helpful. Feel free to reach out if you have more questions or need further assistance.

  Happy coding!

  0

  ---

  

  varun kumar•80

  @varunKumar993Posted 4 months ago

  @krushnasinnarkar sure I will make a note of it, also I will apply your suggestion and I will work accordingly

  0
• 

  Owolabi•250

  @Ay-dotcodePosted 4 months ago

  Good job But it doesn't exactly look like what you were told to design

  0