Flex and Grid

Community feedback

• Account deleted

  Hello, shashankrk46 Great work on this challenge 👏👏. Your design looks good and respond well

  Thank you have fun coding 😇😇

  1

  ---

  

  shashank•225

  @shashankrk46Posted over 3 years ago

  @Nik-web12 I will clear it Thanks for the feedback 🙏🏼

  1
• 

  Prabhjot Kaur•15

  @prabhjotkaur10Posted over 3 years ago

  Hi, To show the face to the model in tab view, i.e 768px and views less than this, you can replace the following code:

  @media (max-width: 860px) .right-col { grid-area: image; background: url(./images/hero-mobile.jpg) no-repeat center top/cover; width: 100%; height: 350px; margin: 30px 0; } }

  This will fix rendering of model in tablet view.

  0

  ---

  

  shashank•225

  @shashankrk46Posted over 3 years ago

  @prabhjotkaur10 Thanks for the suggestions i will change the the width.

  0

  

  Prabhjot Kaur•15

  @prabhjotkaur10Posted over 3 years ago

  ok.. cool. Your code seems good.

  0

  

  Prabhjot Kaur•15

  @prabhjotkaur10Posted over 3 years ago

  Also I think the correct way of aligning the image tag as absolute element to its parent element would be like following:

  <form>
  <div class="input-box">
       <input for="email" name="email" type="text" placeholder="Email address">
                <img class="error" src="./images/icon-error.svg" alt="error">
                <button type="submit" class="btn">
                  <img class="arrow" src="./images/icon-arrow.svg" alt="arrow">
                </button>
                <p class="showError"></p>
      </div>
              </form>
  
  That is, wrap the input, image and button inside the "input-box" block.
  

  0