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 remove max-w-[1440px], it should fill the screen regardless of screen size.
Hope this helps!
Marked as helpful
