html - How to make a responsive mosaic css fullscreen width -
hello having troubles make responsive mosaic, trying acomplish here keep same order of 7 images , if screen smaller make mosaic full width respective proportions in mobile screen maintaining order.
this css:
#mosaic { width: 100%; background-color: aqua; } .largeimg, .smallimg { /*display: inline-block;*/ float: left; } .largeimg { /*width: 40%;*/ background-color: #165384; } .smallimg { /*width: 60%;*/ background-color: #ef0808; } .col-wrap { display: inline-block; }
this demo: jsfiddle demo
hope can , reading.
you can achieve desired functionality using media queries
, code below specific mobile devices, try on;
@media , (max-width: 658px) { // mobile devices #mosaic { display:block; // have each musaic in 1 line } }
Comments
Post a Comment