Mathias• 220
@Mathitarazonad
Submitted
If you have a suggestion, please let me know!
Cristina
@cr1deg0
All comments
- Cristina• 360
@cr1deg0
Posted
Hi Mathias
Your solution looks good, I specially like that you've introduced a media query for medium screen sizes. However the design comparison screenshot above looks odd. Perhaps because of the way you've centered the content on the screen, instead of using "padding" in your ".main-container" you could try: body { display: flex; justify-content: center; align-items: center; height: 100vh; } Hope it helps! Cristina
Marked as helpful
1 - Nemesis• 120
@nemesisaquib
Submitted
i tried my best and I know I am not doing this correct way so if you see anything wrong in my code please tell me
Cristina• 360@cr1deg0
Posted
Hi Nemesis
Your solution looks great, well done! If you want to improve it, you could look into the accessibility and html issues in the report; perhaps replace the "section" tag by a "main" one and "h2" by an "h1".
You could also look into using rem/em units for padding and margin, rather than px.
Cheers
Marked as helpful
0 - Zizi Aymen• 170
@zizi-ayman
Submitted
Any tips on how to deal with images?
Cristina• 360@cr1deg0
Posted
Hi Zizi,
Awesome solution, it's such a great idea to use css grid for this design.
img { display: block; max-width: 100%; } normally helps to work with images. In your solution you can set width: 40px; or similar to control the size of the headshots.
I've noticed your content is not vertically centered on the page. To solve this you could use body { display: flex; flex-direction: column; justify-content: center; height: 100vh; } Hope it helps!
Marked as helpful
1 - Kevin• 110
@KKS1991
Submitted
Hi guys,
I still have struggles with flexbox-positioning. With regard to <div class="container signup-proposal"> and <p class="signup-proposal-txt">: I failed (again) to center the flex-item (<p>) on the x- and y-axis with justify-content: center; and align-items: center; I also tried align-content: center;. So maybe there is someone who can explain to me the issue and can give me some advices.
Another task was to provide an error message when the submitted email address ist not formatted correctly. I also still looking here for an appropriate solution.
Thank you for your support.
Kevin =)
Cristina• 360@cr1deg0
Posted
Hi Kevin,
Good solution, well done!
It looks like your <p> element has some bottom margin applied to it, you can try by adding:
.signup-proposal-txt { padding: 1rem 0; margin: 0; }
You may want to have a look into the desktop version media query. You currently have the breakpoint as min-width: 1440px and it seems too tight, as the page is loading with the mobile layout for me (browser window size just short of 13.3inch). I would try something smaller, perhaps min-width: 1000px;
Hope it helps!
Marked as helpful
0 - Hassan• 940
@hnasser44
Submitted
I couldn't style the error icon and message properly and for some reason also I couldn't style the text under the big heading for desktop :(
Cristina• 360@cr1deg0
Posted
Hi Hassan
The error icon is an svg, rather than inserting it as an image in the html document you can try by adding a css class via javascript to the input element when validating the form. You can define error.svg as background image in the class and control the size and position within the input element with the background properties.
The background images are failing to display because are missing quotes in the code: background-image: url("image.png");
I've noticed also that you have imported the fonts in Italic, perhaps this is what it's preventing the styling of the heading and text.
I hope it helps!
0 - Huda Rashid• 160
@hudarashid
Submitted
Hello, any feedback is welcome :D
Cristina• 360@cr1deg0
Posted
Hi Huda, looks very good! A few things you may want to revisit to make it even better:
- the Learn More button for the Luxury cars is a bit off compared with the other two.
- have a look into the accessibility issues in the report.
- you could round the corners of the card with border-radius: 12px;
- the background colour is more greyish in the design.
Cheers, Cristina
Marked as helpful
0 - Hemant Sirsat• 105
@hemantsirsat
Submitted
Any comments/suggestion for this solution is appreciated. I've done 3 challenges previously and this was by far more challenging as compared to the rest. Thanks.
Cristina• 360@cr1deg0
Posted
Hi Hemant,
It's a good solution, well done! I few things that you may want to revisit:
- it looks like your background gradient is going in the opposite direction to the design.
- you could increase the line spacing in the FAQ answers to make them easier to read.
0
