Mobile first layout using HTML, CSS and JavaScript

Community feedback

• 

  Shahin NJ•1,190

  @SJ-NosratPosted about 3 years ago

  Hi Nick, Great solution! With regards to your first point, see the below steps, as follows:

  • Remove the overflow: hidden; on <div class="split image-container"> in your CSS.

  • Add position: relative; to your .desktop-images class in your CSS.

  • Use the top and left properties to position your box image to the desired position. The properties accepts negatives values too.

  • Lastly to clip the part of the hero image, add the following;

     .main-image {
      display: block;
      position: absolute;
      transform: translate(-20%, -50%);
      z-index: 2;
  
      /* ADD THE BELOW CODE */
      clip-path: inset(0 0 0 4.5rem);
    }
  

  The inset value takes values starting with the top - right - bottom - left much like the shorthand for properties like margin. Think of clip-path as taking a cutter and cutting rectangular strips of a specified length.

  • For <img class="arrow" src="/images/icon-arrow-down.svg" alt="" /> if the alt="" is left empty, then add the aria-hidden="true" attribute, as this allows screen-readers to skip <img> tags that are purely used for decorative purposes. Also, some of your <img> tags are missing the alt attribute; that's you're getting HTML issues. Also, look into semantic HTML.

  With respect to your second point, you can add the following;

   body {
    height: 100vh;
    background-image: linear-gradient(var(--soft-violet), var(--soft-blue));
    font-family: "Kumbh Sans";
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--dark-grayish-blue);
    position: relative;
  
    /* ADD THE BELOW CODE*/
    display: grid;
    align-content: center;
  }
  

  That should get rid of the excess scroll bar.

  Hope the above helps!

  Best of luck with your coding jouney!

  Marked as helpful

  1

  ---

  

  Nick Carlisi•180

  @nickcarlisiPosted about 3 years ago

  @shahin1987 I implemented all the changes you recommended and they all worked great. I had no idea about clip-path. Very cool! Thanks again!

  0

  

  Shahin NJ•1,190

  @SJ-NosratPosted about 3 years ago

  @nickcarlisi Cool! Happy to hear I could help! Best of luck!

  0
• 

  Nick Carlisi•180

  @nickcarlisiPosted about 3 years ago

  Awesome! Can't wait to implement these changes tomorrow and see how it turns out! Thanks so much for the thorough tips and recommendations!

  1
• 

  P

  Remus D. Buhaianu•3,125

  @MiculinoPosted about 3 years ago

  Good job, Nick!

  Your design looks good on different device sizes and it's almost pixel-perfect. The box-shadow might need some slight adjustments. Also, I think it'd be nice to be able to close an accordion by clicking on it again, not having to click and open another accordion. Overall, well done!

  0

  ---

  

  Nick Carlisi•180

  @nickcarlisiPosted about 3 years ago

  @Remus432 Thanks! Yes, I agree on being able to close the accordion by clicking again, but I'm struggling to get it working. Any advice? Thanks again!

  0