Hey, grid solution is cool and light enough. I think everyone faced with the issue like this, so your content is relevant. If you need just a background to be spread across the entire screen, then you can do also box-shadow(0 0 0 100vmax your_color) and clip-path(0 -100vmax) to prevent horizonal scroll. But this works only for background, its useless for the content, thus your solution rules.
Thank you! I wish I had a time machine to go back and help out-I could have been learning along with you! 😊 But seriously, I'm glad you're here now and enjoying the content.
Thanks so much! I appreciate the suggestion. Making a course does require a lot of time and resources, but it's definitely something to consider for the future. Glad you're enjoying the content!
Nice video. Would it be possible for you to do a 2 column layout (Image left and text on the right) with the image on the left bleeding outside the container?
Thank you! Using a CSS grid would make that easier. You could set up two columns in the middle, like "1fr 40% 40% 1fr". The image could then span lines 1 to 3, with the text from lines 3 to 5. The remaining content would start at line 2 and end at line 4.
Can we use code minmax(3rem, 1fr) minmax(auto, 65ch) minmax(3rem, 1fr) as a replacement for code grid-template-columns: 1fr min(calc(100% - 3rem * 2), 65ch) 1fr ?
Hey, grid solution is cool and light enough. I think everyone faced with the issue like this, so your content is relevant. If you need just a background to be spread across the entire screen, then you can do also box-shadow(0 0 0 100vmax your_color) and clip-path(0 -100vmax) to prevent horizonal scroll. But this works only for background, its useless for the content, thus your solution rules.
Thanks for sharing another trick! It's always great to discover new approaches.
I wish you made videos when I was learning. Great content.
Thank you! I wish I had a time machine to go back and help out-I could have been learning along with you! 😊 But seriously, I'm glad you're here now and enjoying the content.
Aren't you still? :)
yeah, I'm still learning. It never ends...
Great content, you should make a course.
Thanks so much! I appreciate the suggestion. Making a course does require a lot of time and resources, but it's definitely something to consider for the future. Glad you're enjoying the content!
Nice video. Would it be possible for you to do a 2 column layout (Image left and text on the right) with the image on the left bleeding outside the container?
Thank you! Using a CSS grid would make that easier. You could set up two columns in the middle, like "1fr 40% 40% 1fr". The image could then span lines 1 to 3, with the text from lines 3 to 5. The remaining content would start at line 2 and end at line 4.
@@OptimisticWeb Thanks.
Can we use code
minmax(3rem, 1fr) minmax(auto, 65ch) minmax(3rem, 1fr)
as a replacement for code
grid-template-columns: 1fr min(calc(100% - 3rem * 2), 65ch) 1fr
?
Yes, that should work, and in that case, you won't need to add any gap.
Solution #2 somehow doesn't work for me. When either margin left or right is applied, it works. But when combined, it doesn't stretch
You can either compare your code with the demo link in the description or share your version with me. I may be able to debug and help.