News-Homepage (Responsive, CSS-Grid, Flexbox, Tailwind CSS)
Design comparison
Solution retrospective
This is the second project I have built with Tailwind CSS, Which had a bit more moving parts to make responsive, but it was fun learning and using more Tailwind.
Any type of feedback would be massively helpful, Thank You!
Community feedback
- @AdrianoEscarabotePosted about 2 years ago
Hi David, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
If we see how the layout is behaving at higher resolutions, with the help of google dev tools, we will see that it is stretching a lot, to solve this we can use a max-width with the value we want the content to stop growing and to center use a margin: 0 auto;
body { max-width: 1440px; margin: 0 auto; }
I noticed that you used a
button
in which case the best option would be ana
, because in my head when a person clicks on a button written Read more, he is not confirming a form, or something like, it will be redirected to another page, to read more about!To resolve do this:
<a class="h-12 w-46 bg-softRed text-sm font-bold tracking-btn text-offWhite hover:bg-veryDarkBlue">READ MORE</a>
The rest is great!
I hope it helps... 👍
Marked as helpful1@David-Henery4Posted about 2 years ago@AdrianoEscarabote Hi Adriano, I'm good, I hope your well
Thanks for the tip on the max-width on the body, I Completely forgot to check on bigger screen sizes and didn't realize it was stretching, so that was a great spot! I will make sure to watch out for this on future projects.
I also changed the button to an anchor tag because I 100% agree this would be more of a link than a button based on the behaviours it would have. I chose a button initially because in the design it looked more like a button and my instinct was to use a button element.
Thanks for the feedback though mate those were two great spots! I greatly appreciate it Thank You! 👍
1 - Account deleted
Hi; add the property 'object-fit: content' to the images to avoid it distorted when resize
1
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