Result summary with CSS and HTML.

Community feedback

• 

  jubril•70

  @HarkorndePosted over 1 year ago

  Hi, I think you did try solving the desktop version; which is good. But my suggestion is that you could try designing for mobile first; this is because it'll help you use the media query more efficient, i.e you can go from mobile to tablet and then to desktop using the (@media (min-width: (size of your tablet)) and you can then set for desktop as well (@media (min-width: (size of your desktop)). The funniest is that you can use 2 or more min-width media in a code. you can read more on it here(https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width/)

  Marked as helpful

  0

  ---

  

  Sevich-Kah•130

  @Sevich-KahPosted over 1 year ago

  @Harkornde I've been working blindly since my laptop does not enable me to resize my browser window.

  0

  

  jubril•70

  @HarkorndePosted over 1 year ago

  @Sevich-Kah when you're on the browser, right-click your mouse, and it's going to show you some menu. Click on inspect and the developer tools will pop out. In it, you'll see one icon that looks like laptop click on it, and it's going to show you responsive design and with this you can inspect your code base on screen size.

  1

  

  Sevich-Kah•130

  @Sevich-KahPosted over 1 year ago

  @Harkornde Thanks a bunch. I always had to copy my code to W3 school editor to see the media effects. This is truly helpful.

  0

  

  jubril•70

  @HarkorndePosted over 1 year ago

  @Sevich-Kah, You’re very welcome. I’m glad you found it helpful. 😊

  0