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

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -