Design comparison
Solution retrospective
I had issues finding what font to use, and figuring out how to put an icon inside an input field.
Community feedback
- @artimysPosted almost 4 years ago
Good work on completing the challenge ChrisPrzR 👍. I'll leave my feedback below.
For the icon in the input field. Note that it's not possible to add an image to an input's pseudo selector (:before, :after). Background-image yes but you're using font-awesome and I recommend adding a pseudo selector on the parent container of your input.
message-input
. See below for font-awesome in pseudo selector.message-input:after { position: absolute; font-family: "Font Awesome 5 Free"; font-weight: 900; // Important otherwise it won't show content: "\f1d8"; // find unicode on font-awesome website // play with position }
Design:
-
I believe I went with a really small font for the phone illustration. It's weird because too small is not legible but needed to match the design. Here's my solution if you'd like to compare.
-
Look into why there's a horizontal scrollbar. Actually for both
.figure1
and.figure2
, useposition: fixed
instead of absolute. They do look a bit squeezed -
The heading and paragraph font size could be larger.
Also check out your solution report to fix key things in your HTML markup. Keep it up 👍
1@ChrisPrzRPosted almost 4 years ago@artimys Thanks for taking the time to write this, I will work with your feedback.
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