Huddle landing page with a single introductory section w/ HTML & CSS
Design comparison
Solution retrospective
After so much time reviewing my css file I could not find why if I set a value to width in the illustration on the left it always renders it with a smaller value in the desktop design (The illustration is a flex element along with the texts container on the right side)
Community feedback
- @HinaSejaru124Posted over 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 helpful1 - @correlucasPosted over 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
withcover
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 helpful1@PVIdubsPosted over 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
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord