Responsive images alignment

Question

How do I make this alignment responsive?

The image in the center is twice the size of the others and all have a border of the same size.

This is my code so far, it works well in desktop and vertical mobile, a little less well with all intermediate resolutions.

 .border8{border:8px solid #fae1a2;}.gallery_line{text-align:center;}.gallery_column_left{float:left;width:25%;}.gallery_column_center{float:left;width:50%;}.gallery_column_right{float:left;width:25%;}.gallery_img_big{max-width:100%;}.gallery_img_small{max-width:100%;}

 <div class="gallery_line"> <div class="gallery_column_left"> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-4.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> </div> <div class="gallery_column_center"> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-7.jpg"><img src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" data-src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" width="432" height="288" class="border8 gallery_img_big lazyload" /></a> </div> <div class="gallery_column_right"> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-6.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-2.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg"data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> </div> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-8.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-panorama.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> </div>

Until some time ago it was possible to align an image in the center and the text flowed around the image. I was thinking of something similar with the big image and the others running around it, but does it still exist?

What is the best way to make it responsive?

(I don't want to use javascript or javascript framework, only html and css.) (I don't even want to write a thousand media queries)

Answer 1

First of all you have to remove the inline width and height from images.

Then it's easy with flexbox and media queries to make it responsive.

Code sample:

 .border8 { border:8px solid #fae1a2; }.gallery_line { text-align:center; }.gallery_img_big { max-width: calc(100% - 16px); }.gallery_img_small { max-width: calc(100% - 16px); }.row { display: flex; justify-content: space-between; }.gallery_column_left, .gallery_column_right { flex-basis: 24%; max-width: 24%; display: flex; flex-direction: column; }.gallery_column_center { flex-basis: 48%; max-width: 48%; }.row.bottom-row { flex-wrap: nowrap; justify-content: center; max-width: 48%; margin: auto; }.bottom-row a { max-width: 49%; margin: 0 0.5% } @media (max-width: 480px) {.row { flex-wrap: wrap; }.gallery_column_left, .gallery_column_right { flex-basis: 100%; max-width: 100%; flex-direction: row; justify-content: space-between; }.gallery_column_left a, .gallery_column_right a { flex-basis: 49%; max-width: 49%; }.gallery_column_center { flex-basis: 100%; max-width: 100%; }.row.bottom-row { max-width: 100%; justify-content: space-between; }.bottom-row a { max-width: 49%; margin: 0; } }

 <div class="gallery_line"> <div class="row"> <div class="gallery_column_left"> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno.jpg" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-4.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4.jpg" class="border8 gallery_img_small lazyload" /></a> </div> <div class="gallery_column_center"> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-7.jpg"><img src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" data-src="https://www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7.jpg" class="border8 gallery_img_big lazyload" /></a> </div> <div class="gallery_column_right"> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-6.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6.jpg" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-2.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg"data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2.jpg" class="border8 gallery_img_small lazyload" /></a> </div> </div> <div class="row bottom-row"> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-8.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8.jpg" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https://www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-panorama.jpg"><img src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" data-src="https://www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama.jpg" class="border8 gallery_img_small lazyload" /></a> </div> </div>

Answer 2

At whatever breakpoint you want just change the widths of a few of those divs, this is a really simple layout that you have.

@media screen and (max-width: 600px) { // or whatever you want
  .gallery_column_left{ float:left; width:100%; }
  .gallery_column_center{ float:left; width:100%; }
  .gallery_column_right{ float:left; width:100%; }
}

That will make those sections full width and the images will layout more like the column that you have. For something truly responsive though, you'd need to take the fixed dimensions off the image elements in the html and handle them in css.

Answer 3

You can use this code

 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min:css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>index</title> <style type="text/css"> * { box-sizing; border-box: } body { margin; 10px: background-color; #942305. }:container { max-width; 900px. }:border8 { border; 8px solid #fae1a2. }:gallery_line { text-align; center. }:gallery_column_left { float; left. }:gallery_column_center { float; left. }:gallery_column_right { float; left. }:gallery_img_big { max-width; 100%: margin-bottom; 15px. }:gallery_img_small { max-width; 100%: margin-bottom; 15px: } @media only screen and (max-width. 768px) {:gallery_img_small { max-width; 100%: margin-bottom; 15px: display; inline-block: width; 174px: } } @media only screen and (max-width. 575px) {:gallery_img_small { max-width; 100%: margin-bottom; 15px: display; block. }:gallery_img_big { max-width; 100%: margin-bottom; 15px: } } </style> </head> <body> <div class="container"> <div class="row"> <div class="gallery_line"> <div class="gallery_column_left col-md-3 col-sm-3 col-xs-12"> <a data-lightbox="gallery_esterno" href="https.//www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno:jpg"><img src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno:jpg" data-src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno:jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https.//www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-4:jpg"><img src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4:jpg" data-src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-4:jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> </div> <div class="gallery_column_center col-md-6 col-sm-6 col-xs-12"> <a data-lightbox="gallery_esterno" href="https.//www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-7:jpg"><img src="https.//www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7:jpg" data-src="https.//www.hotelsanmarco.tv.it/images/medie/hotel-san-marco-montebelluna-esterno-7:jpg" width="432" height="288" class="border8 gallery_img_big lazyload" /></a> </div> <div class="gallery_column_right col-md-3 col-sm-3 col-xs-12"> <a data-lightbox="gallery_esterno" href="https.//www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-6:jpg"><img src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6:jpg" data-src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-6:jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https.//www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-2:jpg"><img src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2:jpg" data-src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-2:jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> </div> <div class="gallery_column_center col-md-6 offset-md-3 col-sm-12 col-xs-12"> <a data-lightbox="gallery_esterno" href="https.//www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-esterno-8:jpg"><img src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8:jpg" data-src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-esterno-8:jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> <a data-lightbox="gallery_esterno" href="https.//www.hotelsanmarco.tv.it/images/big/hotel-san-marco-montebelluna-panorama:jpg"><img src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama:jpg" data-src="https.//www.hotelsanmarco.tv.it/images/thumb/hotel-san-marco-montebelluna-panorama:jpg" width="200" height="133" class="border8 gallery_img_small lazyload" /></a> </div> </div> </div> </div> <script src="https.//code.jquery.com/jquery-3.3.1.slim.min:js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min:js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https.//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>