How to proportionally scale an image grid

HTML & CSS
1

I have been trying to scale an image grid so that the images maintain the layout ( gaps between columns and image size in particular) on a range of devices. scaling down works to an extent,but as soon as I view it on a device larger than MacBook 15" the layout ‘shrinks’ and the images become really small and gaps between the images become very large. Is there a way to maintain the layout design and when viewing it on a larger screen, the whole layout scales up respectively?

Not sure if it is to do with the max width?

I have attached an example of my html and css.

Any help on this would be really appreciated!

<div class="row">
  <ul id="gallery">
  <li>
      <a href="Sister-Series-1" rel="history">
        <figure>
          <img src="https://freight.cargo.site/t/original/i/22e1317617dbff2186899574b1982bc5e9d1aaed43f5cc9cc9097cb6feecbc7d/1.jpg" height="200" width="140" style="width: 140px; height: 200px;">
          <figcaption>
            Sister Series<br>
            5 photographs
          </figcaption>
        </figure>
      </a>

[data-predefined-style="true"] bodycopy a {
    color: rgba(0, 0, 0, 1);
    padding-bottom: 0.1em;
    border-bottom: 0.0em solid rgba(127, 127, 127, 0.3);
    text-decoration: none;
    
    font-size: 1rem;
    line-height: 1.2;
}

body {
    font-style: normal;
  background-color: #fff;
  font: 0.95em / 1.32em sans-serif;
  color: rgba(255, 255, 255, 1);
  font-family: Sans-serif;
    
    
}

#gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  column-gap: 2rem; 
  
  background: rgba(204, 204, 204, 0);
  margin-left: 50px;
  margin-right: 50px;  
   }
#gallery {
  box-sizing: border-box;
}
#gallery > * + * {
    margin: 2em 0;
    
    
}
#gallery * {
  box-sizing: inherit;
    
}
  #gallery{
      box-sizing: border-box;
    
}
#gallery li {
  position: relative;
  flex:   16.6% ;
  flex-basis: calc(16.6% - 4rem);
  background-color: rgba(210, 207, 207, 0);
   
  overflow:visible;
  max-width: 40%;
   
}
.h3 {
  font-size: 5em;
}
#gallery img {
  display: block;
  max-width: 140px;
  height: auto;
   
 
}

#gallery .video {
  flex: 1 0 25%;
    
}
#gallery video {
  width: 100%;
  height: auto;
     
}



#gallery figcaption,
#gallery figure {
  display: block;
  margin: 6px;
  padding: 0;
    
}
#gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.0em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

#gallery li:hover figcaption {
  opacity: 1;
}
#gallery figure {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
    
}
#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery figure2 {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
#gallery figcaption2,
#gallery figure2 {
  display: block;
  margin: 10px;
  padding: 0;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery figure2 {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
  flex-basis: calc(33.3% 4rem);
  background: rgba(204, 204, 204, 0);
    padding: 2rem;
}
@media(max-width:1920px){
#gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  
  list-style-type: none;
  align-items: center;
  column-gap: 2rem; 
 
  background: rgba(204, 204, 204, 0);
  margin-left: 50px;
  margin-right: 50px; 
  
   }
#gallery li {
  position: relative;
  flex:   16.6% ;
  flex-basis: calc(16.6% - 4rem);
  background-color: rgba(210, 207, 207, 0);
    
  overflow:visible;
  max-width: 40%;
   
}

#gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.8em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.8em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery img{
    width: 400px
}
@media(max-width:1600px){
    #gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  column-gap: 2rem; 
  
  background: rgba(204, 204, 204, 0);
  margin-left: 50px;
  margin-right: 50px;  
   }
#gallery li {
  position: relative;
  flex:   16.6% ;
  flex-basis: calc(16.6% - 4rem);
  background-color: rgba(210, 207, 207, 0);
    
  overflow:visible;
  max-width: 40%;
   
}
#gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.0em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;


  
}
@media(max-width:1280px){
    #gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  column-gap: 2rem; 
  
  background: rgba(204, 204, 204, 0);
  margin-left: 50px;
  margin-right: 50px;  
   }
#gallery li {
  position: relative;
  flex:   16.6% ;
  flex-basis: calc(16.6% - 4rem);
  background-color: rgba(210, 207, 207, 0);
    
  overflow:visible;
  max-width: 40%;
   
}
#gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.0em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

@media(max-width:992px){
    #gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  margin: 10px;
  margin-left: 30px;
  background: rgba(204, 204, 204, 0);
  padding: 0rem;
  
}
#gallery {
  box-sizing: border-box;
}
#gallery > * + * {
    margin: 1em 0     ;
    
    
}
#gallery * {
  box-sizing: inherit;
}
#gallery li {
  position: relative;
  flex: 1.5em;

  background-color: rgba(210, 207, 207, 0);
  overflow: visible;
  max-width: 100%;
    }
}

    #gallery img {
  display: block;
  width: auto;
  height: auto;
        
        
   
}
#gallery video {
  width: 100%;
  height: auto;
}
#gallery figcaption,
#gallery figure {
  display: block;
  margin: 6px;
  padding: 0;
}
#gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.0em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery li:hover figcaption {
  opacity: 1;
}
#gallery figure {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery figure2 {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
#gallery figcaption2,
#gallery figure2 {
  display: block;
  margin: 10px;
  padding: 0;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.0em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery figure2 {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}

@media(max-width:768px){
    #gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  
  margin: 10px;
    margin-left: 30px;
  background: rgba(204, 204, 204, 0);
 
  padding: 0rem;
  
}
#gallery {
  box-sizing: border-box;
}
#gallery > * + * {
    margin: 1em 0     ;
    
    
}
#gallery * {
  box-sizing: inherit;
}
#gallery li {
  position: relative;
  flex: 1.0em;
  
  background-color: rgba(210, 207, 207, 0);
  overflow: visible;
  max-width: 100%;
    }


    #gallery img {
  display: block;
  width: auto;
  height: 100%;
        
   
}
#gallery video {
  width: 100%;
  height: auto;
}
#gallery figcaption,
#gallery figure {
  display: block;
  margin: 6px;
  padding: 0;
}
#gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.9em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery li:hover figcaption {
  opacity: 1;
}
#gallery figure {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery figure2 {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
#gallery figcaption2,
#gallery figure2 {
  display: block;
  margin: 10px;
  padding: 0;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.9em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery figure2 {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}

@media(max-width: 600px){
    #gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0,8em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.8em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

#gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  
  margin: 10px;
    margin-left: 30px;
  background: rgba(204, 204, 204, 0);
 
  padding: 0rem;
  
}
#gallery {
  box-sizing: border-box;
}
#gallery > * + * {
    margin: 1em 0     ;
    
    
}
#gallery * {
  box-sizing: inherit;
}
#gallery li {
  position: relative;
  flex: 1.5em;

  background-color: rgba(210, 207, 207, 0);
  overflow: visible;
  max-width: 100%;
    }


@media(max-width:500px){
    #gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  
  margin: 10px;
    margin-left: 30px;
  background: rgba(204, 204, 204, 0);
 
  padding: 0rem;
  
}
#gallery {
  box-sizing: border-box;
}
#gallery > * + * {
    margin: 1em 0     ;
    
    
}
#gallery * {
  box-sizing: inherit;
}
#gallery li {
  position: relative;
  flex: 1.0em;
  
  background-color: rgba(210, 207, 207, 0);
  overflow: visible;
  max-width: 100%;
    }


    #gallery img {
  display: block;
  width: auto;
  height: 100%;
        
   
}
#gallery video {
  width: 100%;
  height: auto;
}
#gallery figcaption,
#gallery figure {
  display: block;
  margin: 6px;
  padding: 0;
}
#gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.8em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery li:hover figcaption {
  opacity: 1;
}
#gallery figure {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery figure2 {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
#gallery figcaption2,
#gallery figure2 {
  display: block;
  margin: 10px;
  padding: 0;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.8em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

#gallery li:hover figcaption2 {
  opacity: 1;
}
#gallery figure2 {
  display: inline-flex;
  flex-direction: column;
  margin: auto;
  position: relative;
}
    @media(max-width:480px){
    #gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.7em;
  background-color: rgba(177, 25, 25, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 0.7em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
    #gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;
  margin: 10px;
  margin-left: 30px;
  background: rgba(204, 204, 204, 0);
  padding: 0rem;
  }

#gallery {
  box-sizing: border-box;
}
#gallery > * + * {
    margin: 1em 0     ;
}
#gallery * {
  box-sizing: inherit;
}
#gallery li {
  position: relative;
  flex: 1.0em;
  background-color: rgba(210, 207, 207, 0);
  overflow: visible;
  max-width: 100%;
    }
 @media(max-width: 320px){
     #gallery figcaption {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 0px;
  right: 0;
  bottom: 0;
  left: 1px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.0em;
  background-color: rgba(204, 204, 204, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}
#gallery figcaption2 {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: left;
  position: absolute;
  top: 13px;
  right: 0;
  bottom: 0;
  left: -3px;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.0em;
  background-color: rgba(222, 73, 73, 0);
  color: #fff;
  text-align: left;
  opacity: 0;
  transition: 0.5s ease;
  pointer: events none;
}

        
#gallery {
  display: flex;
  position: relative;
  flex-wrap: wrap;
  list-style-type: none;
  align-items: center;

  margin: auto;
  margin-left: auto;
  background: rgba(204, 204, 204, 0);
 
  padding: 1rem;
  
}
#gallery {
  box-sizing: border-box;
}
#gallery > * + * {
    margin: 1em 0     ;
    
    
}
#gallery * {
  box-sizing: inherit;
}
#gallery li {
  position: relative;
  flex: 1.5em;

  background-color: rgba(210, 207, 207, 0);
  overflow: visible;
  max-width: 80%;
    }
2

Hi,

When you post a demo its best if you can provide a link or a reduced test demo such as in codepen which includes all pertinent code.

I looked at the css you posted and all the media queries seem to be missing their closing brackets so either the rules are corrupted or that is some sort of preprocessor css.

Also you don’t need to repeat every rule in the smaller media queries you just need the differences/overrides.

I’ve put up a codepen demo of your code and removed all the styles that I couldn’t see play a part in the gallery. I then tweaked them to fit better.

I may be wide of the mark as I have to guess a lot of things.

Of course it depends on your requirements and whether all your images are the same aspect ratio and if not then it gets more complicated as you’d either have them at different heights or will need to fix the height and use object-fit:cover to crop them all to the same height.

There are so many variables in a gallery that its not possible to give an answer than fulfils every circumstance :slight_smile:

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.