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: Image component - Next.js Tutorial
From the course: The Freelance Stack: Real Project with Next.js and Strapi
Styling: Image component
So we're going to do the last bit of styling for individual blog page right now, and it's not going to be that much So we're going to go into the article component and what we want to have is we now for the landscape image want to write The styles that make it appear as it does in the design and we have the article Image class generally we wanted to have it centered, so we're just going to say on this one here we want to have the margin 0 so top bottom is 0 and then The left and right margin will be auto meaning it takes as much space as there is on both sides Which will automatically center it now. I wanted to have a width of 65% of the available width But I want to make sure that the minimum width will always be 400 pixels actually, I don't know why I said 400 pixels It should be 40 RAM like that and now I also do want to have some margin to the bottom I'm not sure how much it was in the design, but the whole component should, I think, have, yeah, 6 rem right there. So margin-bottom…
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)
-
-