html - Can't make three divs with background images responsive -
i have 3 divs contain background images (background-image: url()
) i'm having issues in making them responsive (using bootstrap) , putting spacing between them. tried things width: 100% , margin: 0 auto adding margin property kinda removes margin , images lose spacing between each other if margin used while padding of course doesn't work. reason cannot add width images height.
http://codepen.io/skullscream-1471533661/full/jaoojb
i'd google has got me frustrated can't think of google.
flexbox excellent making sort of thing easy. here great resource flexbox learn from.
here i've given parent "display: flex" make children flex elements. i've made children 32% wide (leaving 1% gap). i've set parent "justify-content: space-between" tell flex elements leave space between each item.
on mobile i've given parent "flex-wrap: wrap" if wide they'll drop next line, , children 100% width span full width of device.
additionally background images work fluid boxes i've given them "background-size: contain" , "background-position: center center". ideally better use actual image tags them.
please note flexbox doesn't yet have full browser support (but it's still pretty good), , you'll need add vendor prefixes necessary.
.projects { display: flex; justify-content: space-between; } .projects > div { flex: 0 1 32%; background-size: contain; background-position: center center; } @media screen , (max-width: 760px) { .projects { flex-wrap: wrap; } .projects > div { flex: 0 1 100%; margin-bottom: 20px; } }
Comments
Post a Comment