Receipe page using HTML and CSS

Community feedback

• 

  Bishal Singh Deo🎮•1,440

  @Bishalsnghd07Posted 9 months ago

  Hi, Chiwai👋

  You are giving width of image 19.375rem in breakpoint 375px which preventing your full width of image in mobile view.

  Apply this changes only in media queries and check whether the issue is solve or not👇 you only need to remove width and all set

  @media only screen and (max-width: 375px) { body { width: 22.5rem;❌(remove this) margin: 0; } main { width: 22.5rem;❌(remove this) margin: 0; border-radius: 0; } .image-container { margin: 0; padding: 0; } img { width: 19.375rem; ❌(remove this) border-radius: 0; padding-right: 1.875rem; margin: 0; } .description { width: 19.375rem;❌(remove this) } .preparation { width: 18.75rem;❌(remove this) padding-left: 0.625rem; padding-right: 0.625rem; } .preparation-list { width: 19.375rem;❌(remove this) } .ingredients-used ul { width: 19.375rem;❌(remove this) } .ingredients-used li { text-indent: -1.25rem; } .instructions-items { width: 18.75rem;❌(remove this) padding-right: 0.625rem; } .nutrition-table { width: 19.375rem;❌(remove this) } }

  Marked as helpful

  0
• 

  Jessica Arvizu•180

  @jessicaArvizuPosted 9 months ago

  Hello there 👋 @jchiwaii.

  Good job on completing the challenge!

  Hey there! I've got a suggestion to make your code even cooler.

  Discover Media Queries: Media queries are like magic for responsive web design. They let you use different styles in your CSS based on things like how big the screen is or whether it's in portrait or landscape mode. Start by checking out some articles or tutorials to get the hang of how they work and how to use them like a pro.

  Practice, Practice, Practice: The more you play with media queries in your projects, the better you'll get at using them. Begin with simple layouts and then add more complexity as you feel more comfortable. Try out different breakpoints (points where your design changes) and CSS rules to see what happens on all kinds of devices.

  Go Mobile-First: Here's a cool trick for responsive design – go mobile-first! Design your layout for mobiles first, then add styles for bigger screens using media queries. This way, your website will look awesome on small screens and smoothly adjust to the bigger ones. Give it a shot, and your site will be top-notch! 🚀🌟

  I really hope you find this suggestion helpful for your upcoming projects!

  Keep rocking the fantastic work and don't shy away from tackling new projects. Your progress is truly remarkable, and every project is a positive step in your front-end development journey! 🚀🌟

  Apart from that, great job!

  Wishing you happy coding ahead!

  Marked as helpful

  0
• 

  Chiwai•100

  @jchiwaiiPosted 9 months ago

  Thank you

  0