How to eliminate padding from photo in a grid
JSfiddle: https://jsfiddle.net/a215fL3s/4/
Basically I need the left grid item (text) to have padding still applied when viewport is smaller, but not the image on the right. I can't add padding internally since that'll cause the item on the left not to align with the other sections (e.g. "Another section with regular text" above it.
Also if viewport goes to mobile view, and the grid becomes 1 col, same thing i want the image to extend edge-to-edge and only the text to maintain the padding.
Not really sure how to approach this!
Create a responsive grid layout - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
2 Replies
I'd drop the
.container, and use a single grid to control the entire thing.This video covers the basics for this idea.
https://youtu.be/c13gpBrnGEw
It's just a single column in the middle in the video, (with a more complex outer system), but you could easily have the middle be 2 columns, and have the image go to different sizes at certain breakpoints
Kevin Powell
YouTube
A new approach to container and wrapper classes
The wrapper or container is probably the most common design pattern around, but after coming across an article by Stephanie Eckles looking at how we can use a grid to emulate a container, and have simple breakouts — https://smolcss.dev/#smol-breakout-grid — I had an idea of how we could do this to completely drop the idea of containers, and ...