Huddle landing page with a single introductory section w/ HTML & CSS

Community feedback

• 

  HinaSejaru124•310

  @HinaSejaru124Posted about 2 years ago

  Hello, PVI. All <a> tags must have a closing tag and discernible text.INFO The type attribute for the style element is not needed and should be omitted.

  Context:

  :host, ERROR CSS: Unknown pseudo-element or pseudo-class :host

  Context: ext/css`>:host,:root ERROR CSS: Unknown pseudo-element or pseudo-class :host

  Context: }svg:not(:host).svg- ERROR CSS: transform: too few values for the property transform.

  Context: e-height,-.5em))}50%{-webkit-t ERROR CSS: transform: too few values for the property transform.

  Context: ebound,-.125em))}64%{-webkit-t ERROR CSS: transform: too few values for the property transform.

  Context: -angle,-180deg))}}@-webkit-key ERROR CSS: transform: too few values for the property transform.

  Context: ate-angle,none))}.fa-stack{dis

  Marked as helpful

  1
• 

  Lucas 👾•104,400

  @correlucasPosted about 2 years ago

  👾Hello PVI, congratulations for your new solution!

  You need to replace this properties to have the hero image with a responsive behavior and respecting the div width, note that your hero image is too big and making the solution grow to much and create a verticall scrollbar

  .picture-img {
      /* width: 100%; */
  }
  img {
      max-width: 100%;
      display: block;
  }
  

  Replace contain with cover to make the background-image grow full height:

  body {
      background-color: var(--violet);
      background-image: url(../images/bg-mobile.svg);
      background-repeat: no-repeat;
      background-size: cover;
      padding: 10%;
  }
  

  👋 I hope this helps you and happy coding!

  Marked as helpful

  1

  ---

  

  PVI•210

  @PVIdubsPosted about 2 years ago

  @correlucas Thank you... In the last few days I have learned a lot thanks to Frontend Mentor, with that and with these tips I feel so good to present a better solution to this challenge...

  happy coding

  0