Sunnyside responsive design

Community feedback

• 

  T

  Chamu•13,130

  @ChamuMutezvaPosted about 2 years ago

  Greetings Olusegun

  • the hamburger has to be an button element, use the anchor element for navigating to other pages or sections of the page. Click events are associated with buttons as in this case - this is for hiding and showing the nav items.
  • I see you pipe symbol | between your classes in your html , eg <div class="pst-abs | center-div "> , is that for styling purposes. That's something new to me.
  • use css to transform text to uppercase, eg the h1 has the following text WE ARE CREATIVES. I have heard that text written in uppercase can be read letter by letter by some screen readers.
  • for displaying different images between screen sizes, eg the following

  <div class="img-trans">
              <img class="img-mobile" src="./images/mobile/image-transform.jpg" alt="transform-image">
              <img class="img-desktop" src="./images/desktop/image-transform.jpg" alt="transform-image">
            </div>
  

  Look into responsive images methods such as the picture element and the srcset.

  • generally , do not set the width of the body - the only thing you can set is the min-height: 100vh. Some devices are smaller than 375px, the site cannot be viewed properly below the 375px mark.

  Happy coding

  Marked as helpful

  1

  ---

  

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  @ChamuMutezva Hi Chamu, the pipe symbol is something I've seen Kevin Powell use in his tutorials where he's employing CUBE CSS, and he's using the symbol to separate different groups of classes. Kevin mentioned that it's a technique he picked up from Andy Bell I believe, except Andy uses square brackets.

  Marked as helpful

  1
• 

  Elaine•11,400

  @elaineleungPosted about 2 years ago

  Hey Olusegun, this is a really good try I think! The things I'd suggest are just add the Google Fonts for this challenge instead of using the browser's default fonts, and also make sure the images aren't distorted, as right now some are out of their aspect ratio. To fix that, use either object-fit: cover for img or use background-size: cover if the image is a background image.

  Lastly, be sure to check out the issues in your report; you're missing the main landmark tag right now, which can be easily resolved; simply add it under header and put all the sections of the page inside main.

  Hope this helps, and keep going!

  0
• 

  Davies Precious•170

  @PreshstiksPosted about 2 years ago

  You did great!

  0