Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

How to Escape the Container on Only One Side

Kevin Powell via YouTube

Overview

Coursera Flash Sale
40% Off Coursera Plus for 3 Months!
Grab it
Learn advanced CSS techniques for creating full-width elements on one side of a container in this comprehensive 29-minute tutorial. Explore versatile methods for breaking out of container constraints while diving deep into custom properties, logical properties, grid systems, and positioning. Master the art of responsive design by implementing different layouts for small and large screens, fixing content placement, and adjusting background widths. Discover solutions for various scenarios, including text placement before images, and learn how to fine-tune vertical spacing, alignment, and inner spacing. Enhance your CSS skills with practical examples and expert tips for creating visually appealing and flexible layouts.

Syllabus

- Introduction
- The basic setup for small screens
- Basic setup for larger screens
- Fixing the placement of content on larger screens
- Making the background take up the full width
- Making it work if the text is before the image
- Fixing the vertical spacing
- CSS Demystified
- Fixing the alignment with the wrapper
- Fixing the inner spacing
- Fixing the images

Taught by

Kevin Powell

Reviews

Start your review of How to Escape the Container on Only One Side

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.