Design comparison
Solution retrospective
Hello everyone, I hope you had a great time coding. am here to let you know about this project I have been working on, which was so challenging especially the testimonial section, but am proud atleast because I'm actually doing the challenge which will help me improve in days to come, it's my second Junior project, in my opinion the desktop design is almost pretty, am just having troubles with the responsive design especially in the testimonial section, here are some points I need you to help me with.
1 - Google fonts are not working in my project. I have added the link in html head but its not working, kindly see if you might find the problem
2 - How to change svg colors. I have tried using fill but its not working, if you have any idea you can help.
3 - How to change the background image in small devices. I have tried with what I know but it seems not to be working.
4 - finally if there is anything you I'd like to advice me, please fill free to leave a comment and I promise it will add something to your coding skills, thanks so much am Diu Gach.
Community feedback
- @CodeVeePosted over 3 years ago
Good job on this.
For your question on svg colors, I noticed you had multiple fill properties on the svg. I believe using just one will do.
Changing background Image can be done using display property. Use media queries to turn on and off the display of the desired image.
Marked as helpful0 - @vanzasetiaPosted over 3 years ago
👋Hi Diu Gach!
I have some feedback on this solution:
- On my mobile device (360px), everything is overlapping. Also the page isn't full width.
- For the meaningless images or decorative images like illustration and icons , you can just empty the
alt=""
attribute. - Please clean up your
index.html
by deleting all the content text that is being commented.
That's it! Hopefully this is helpful!
0 - @aUnicornDevPosted over 3 years ago
1.Try adding the following to your
<head>
tag<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin=""> <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet">
and
font--family:'Raleway', sans-serif;
to your.header__heading
class.- You cannot use the fill property image on an image. Try pasting the whole
<svg>
code in<div class ="contact__logo">--SVG CODE HERE--</div>
and use.contact__logo svg path { fill:#fff; }
3.The fixed height of
height:120vh
of home is causing the third issue. You should use media queries and adjust the height accordingly.4.Do work on media queries as the overflow starts at round 600px.
Happy to see that you have used BEM for your CSS. It's a good practice
0@DiuGachPosted over 3 years ago@aUnicornDev Thanks so much, your feedback is so helpful, I will try to implement your idea thanks.
1@vanzasetiaPosted over 3 years ago@DiuGach I want so curious, when will you try to implement what @aUnicornDev have said 17 days ago?
0 - You cannot use the fill property image on an image. Try pasting the whole
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