From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

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

Solution: Info card with image

Solution: Info card with image - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Solution: Info card with image

“

(upbeat music) - [Instructor] Let's make this card responsive. According to the requirements, on a slightly larger screen, we have this image next to the text. So obviously, let's change the flex direction from column to row at this break point, which should be sm breakpoint. So at the end of all the classes, let me add sm:flex-row. And let me refresh. Right. We do have it next to each other, we just need to size it now. If you look at the screenshot here, the image width could some somewhat be w-60 or something. So let's try that. The image here, let me add w-60 at sm breakpoint. And see what we get when we refresh. Right. I think this looks perfect. Now we need to make it stick to the edges of the card. That means this overall padding on the section has to be removed. So let me make it p-0 at sm breakpoint. And refresh. But we need that same padding on only the text div inside instead. So, here, for the div, at sm breakpoint, let me add p-6. This gives padding on all sides, but…

Contents