/sm/ - Social Media

problem: creating a single html/css template for facebook twitter & instagram posts that looks good on mobile/desktop
solution:
use flexbox and vh units to make cards stack vertically or horizontally based on screen size. add meta viewport tag too.

<meta name="viewport" content="width=device-width, initial-scale=1">

css:display: grid'grid-template-columns:
'3fr 20px auto'
@media (max-width :768px) {

display:flex;

}
flex-direction:
column
justify-content:center
align-items:center
padding-bottom:auto}
social media card
html

<div class="card"

>

<img src="img_url"/

>

{{title}}

{{description}}
<a href="#/post"
>read more</a>[/
css]
this keeps designs consistent across platforms and saves time! ❤