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: InfoBlocks

Styling: InfoBlocks - 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: InfoBlocks

“

We'll do the styling next of the info blocks and the way we're going to do it is by obviously creating our sass file first. So let's do that within our components folder right here. Info block as css our main css i'm going to do this first this time so i'm not forgetting again info block like that we'll put that to the right hand side and then we're going going to have a look at our block to make sure we're doing it right. So the first thing is we're going to create the info class here. We need to have a display flex so that it's all in one row our image and our container. We also want them to be spaced apart from each other so that they're sitting at the far corners of our info block and we need to add some padding as well. Now the padding is a little bit tricky here because we actually don't want to have padding on the side where the image is, we only want to have it on the right hand side. We need 4.8 padding here, but the thing is then when it turns around we need 4.8, it should…

Contents