All the other div settings work, but when using classes .l100 and .p100 , the image doesn't display.
I tried rearranging the style for .l100 and .p100 after the others, but it makes the .l75 and .p75 dissapear...
Can anybody help with this, here's the code:
* {
margin: 0px;
padding: 0px;
}
#portofolio {
width: 80%;
margin: auto;
}
.image {
background-size: cover;
background-repeat: no-repeat;
background-position:center;
position: relative;
margin-bottom: 1%;
margin-right: 1%;
box-sizing: border-box;
/*-webkit-box-shadow: 10px 10px 58px -20px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 58px -20px rgba(0,0,0,0.75);
box-shadow: 10px 10px 58px -20px rgba(0,0,0,0.75);*/
float: left;
}
//portrait
.p100 {
width: 99%;
padding-bottom: 177.77%;
margin-right: 0%;
}
.p75 {
width: 74%;
padding-bottom: 133.33%;
}
.p50 {
width: 49%;
padding-bottom: 88.88%;
}
.p25 {
width: 24%;
padding-bottom: 42.1%;
}
//landscape
.image.l100 {
width: 99%;
padding-bottom: 56.25%;
}
.l75 {
width: 74%;
padding-bottom: 42.1875%;
}
.l50 {
width: 49%;
padding-bottom: 28.125%;
}
.l25 {
width: 24%;
padding-bottom: 14.0625%;
}<div id="wrapper">
<div id="header"></div>
<div id="portofolio">
<!--<div style="width: 100%; height: 400px; overflow-y: hidden; overflow-x:visible;margin-bottom: 2vh;">-->
<div class="image p25" style="background-image: url(https://image.ibb.co/jJ4rNF/g7_XLRx_E2_crop.jpg);"></div><!--https://image.ibb.co/cdpKba/g7XLRxE.jpg-->
<div class="image l75" style="background-image: url(https://image.ibb.co/dVGMpv/329_Flower.jpg);"></div><!--</div>-->
<div class="image l50" style="background-image: url(https://image.ibb.co/dgwkhF/20170501_135937_DARKER_CROPPED.jpg);"></div>
<div class="image l50" style="background-image: url(https://image.ibb.co/h1WPba/ezgif_com_crop_PROBABLY_THE_BEST.gif);"></div>
<div class="image l100" style="background-image: url(https://image.ibb.co/fJL4ba/20170604_222345.jpg);"></div>
</div>
</div>
