Design comparison
Solution retrospective
Just keep going!
What challenges did you encounter, and how did you overcome them?I feel like i still missing something about responsivness
What specific areas of your project would you like help with?Any feedback is welcome.
Community feedback
- @petrihcourPosted 3 months ago
You did an awesome job making this response! It looks great on tablet, mobile, and desktop.
When pulling fonts from google and using them in code, to make sure they actually take effect, you can add them into your Tailwind CSS styles like this:
tailwind.config = { theme: { extend: { colors: { // insert colors here }, fontFamily: { "red-hat-display": ["Red Hat Display", "sans-serif"], }, } } }
and when you use it in your HTML classes, you can do
class="font-red-hat-display"
in which you'll see the font load properly on the site as currently it's using a default font from Tailwind.On larger desktop screens, the page doesn't take up the full screen because of the
max-w-[1440px]
in your main element. Keep in mind the max-w-[1440px] is simply a tool for us to use to match up our site with the example provided by Frontend Solutions, so you'll set that width yourself in your Responsive Dev Tools. If you removemax-w-[1440px]
, it should fill the screen regardless of screen size.Hope this helps!
Marked as helpful1
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