Feed layout css
Hey,
Would you have an idea of whether it's achievable to go from the first screenshot (a mobile view) to the second (a desktop view) without media queries?
In short, the border bottom on the first view is 100% of the viewport width, while on the second, the border is the width of the content.
5 Replies
why do you want to avoid a media query? They're not a sign of failure if you have to use them, they're just a tool in your toolbox
Breakpoints are not yet defined
so I wanted to know if there was a smoother solution
What I could possibly do instead of applying a border to the articles would be to use an hr between each article and with a media query adjust its width?
but that would be a lot of hr 😄
if you make the line a psuedo element of each post and give it a min width (and overflow hidden on the x-axis for the body/container), you could do something like this
https://codepen.io/MarkBoots/pen/bGyYrad
another way to extend a bottom border without a pseudo is with
border-image-outset. No idea if there is a way to do this without a media query. Maybe the same max() idea would apply? https://codepen.io/jsnkuhn/pen/ZENaXoq