From the course: The Freelance Stack: Real Project with Next.js and Strapi

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Styling featured items component

Styling featured items component - Next.js Tutorial

From the course: The Freelance Stack: Real Project with Next.js and Strapi

Start my 1-month free trial Buy for my team

Styling featured items component

“

Awesome, we built the featured article and featured article structure to now be able to style it. The way we are going to style it is we're going to create another file in our Sass components right here. We just need featured items SCSS, split it to the right, never forget to bring it into your main SCSS to apply the styles. And then we can start writing all the styles we need. And what do we need in this case? We have our headline, there's going to be some margin, which we're going to apply, but the more complicated part of our CSS will obviously be, first of all, the whole article component here, and also make the container behave in exactly the way that we need it, meaning each one of these elements should be taken up approximately one third of the width of the container, except that there is some margin attached to it, and we also then need it to wrap around, meaning that if there's a fourth article it doesn't get displayed here but instead it reps to the next row. So how are we…

Contents