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: Text with image component - Next.js Tutorial
From the course: The Freelance Stack: Real Project with Next.js and Strapi
Styling: Text with image component
Okay, so with styling, we now have to also make those adjustments in our CSS code so that we can account for the reverse and the portrait option of our strappy component, right? Or of our blog article component. For us to do that, we're going to have to write quite a bit of CSS. So I'm going to keep, I'm going to actually keep the image text component open so we can see what we're doing. then I create not a new file because we now are going to add that to the article components we created in the headline styling video. Well we didn't have to do much styling but that will change now. So what do we have to do? Well first of all we're going to do again the base case right the default text image component which is going to be a flex container and we also want to have space between. We're also going to make it that here we're going to have 6rem distance to the next component. So that's why we're going to say here margin-bottom will be 6rem like that. Now you can do this yourself, you can…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Create dynamic zone in Strapi for customizable blog content14m 6s
-
(Locked)
Creating data for highlight article8m 28s
-
(Locked)
Article hero section JSX5m 45s
-
(Locked)
Styling: Article hero section5m 26s
-
(Locked)
Article intro component JSX8m 40s
-
(Locked)
Styling: Article intro component5m 29s
-
(Locked)
Generic article component to render different component depending on Strapi data9m 14s
-
(Locked)
Article headline JSX3m 15s
-
(Locked)
Styling: Article headline1m
-
(Locked)
Text with image component JSX15m 9s
-
(Locked)
Styling: Text with image component5m 48s
-
(Locked)
Article paragraph JSX2m 23s
-
(Locked)
Styling: Article paragraph1m 6s
-
(Locked)
Image component JSX3m 49s
-
(Locked)
Styling: Image component2m 20s
-
(Locked)
Other articles section on individual blog page3m 17s
-
(Locked)
Blog section homepage JSX13m 11s
-
(Locked)
Styling: Blog section homepage8m 52s
-
(Locked)
Fix article item for featured items on homepage1m 18s
-
(Locked)
-
-