Responsive news homepage using Grid and TailwindCSS
Design comparison
Solution retrospective
I think that the most challenging part was the three cards at the bottom. I used the tailwindcss framework.
Community feedback
- @AdrianoEscarabotePosted almost 2 years ago
Hi Dario Rodrigues, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:
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="px-16 font-bold tracking-widest py-3 md:py-4 uppercase bg-soft-red transition-all hover:bg-very-dark-blue text-white">Read more</a>
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; }
The rest is great!
I hope it helps... 👍
Marked as helpful1@UnidadePosted almost 2 years ago@AdrianoEscarabote Hi Adriano, thanks for the feedback. I agree about the button tag, I forgot to use a <a> tag, every time I'm styling something clickable by the user, I automatically use the button tag without thinking about it 😅. Thanks for the solution of the stretching at the big resolutions, really helpful.
1 - @maxime927Posted almost 2 years ago
Oì Dario, tudo bom contigo ? ;) I think i can give you some advices to help you to improve your solution :
- As you can see, we can divide the design in 3 big columns ( by the three columns of the last section). So, you can divide the structure as two sections :
<section class="first-section"> <div class="main-content">…</div> <div class="aside">…</div> </section> <section class="second-section"> <ul> … </ul> </section>
In that way, you'll be able to define a specific width to each box in function of the container they all in.
For exemple : For the three cards at the bottom you'll be able to do this
.second-section ul li { width: calc((100% - 60px)/ 3); }
"60px" represent 2 times 30px which are the spacing between each column. and by getting the<ul>
parent as a flexbox withjustify-content: space-between
you'll have the good size for your Three cards section ;)For the main content
.main-content { width: calc((100% - 60px)/ 3 * 2 + 30px); }
because the main content takes 2 column i added "* 2" and "+ 30px" to include the column spacing unused because there are only 2 column in this section.Parabéns para a tua solução, continua como assim :) Hope it helps...
Maxime
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