I setup a grid from a tutorial I found at: https://allurewebsolutions.com/implement-masonry-isotope-infinite-scroll-imagesloaded-wordpress
Basically, the script arranges my posts on a grid and then when I click on item, I go to it's permalink: https://elpasobaseballhalloffame.org/inductees/
The script is pretty responsive, it adapts to different screen sizes and only shows what will fit within the window, which works great.
I want to make one minor tweak...how can I center the items so that if it can only fit one or two items they are not left-aligned, they are centered on the page?
The html output looks like:
<ul id="grid" style="position: relative; height: 2174px;">
<li style="position: absolute; left: 0px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/al-silva/"><img width="218" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-258x355.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-291x400.jpg 291w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-196x270.jpg 196w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva.jpg 317w" sizes="(max-width: 218px) 100vw, 218px"><div class="caption"><h3>Al Silva</h3><p>Inducted in 2000 Started his playing days at the Dan Ponder Little League...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alan-zinter/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Alan Zinter</h3><p>Inducted in 2009 Four year letterman for Hanks High School All District and...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alberto-mendez/"><img width="198" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez-178x270.jpg 178w" sizes="(max-width: 198px) 100vw, 198px"><div class="caption"><h3>Alberto (Beto) Mendez</h3><p>Inducted in Original Hall of Fame Class of 1988 Started playing in the...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 831px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-gutierrez/"><img width="201" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-258x384.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-268x400.jpg 268w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-181x270.jpg 181w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez.jpg 590w" sizes="(max-width: 201px) 100vw, 201px"><div class="caption"><h3>Alex Gutierrez</h3><p>Inducted in 2006 Alex Gutierrez was the soul of baseball in the Lower...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 388px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-villalobos/"><img width="206" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-258x375.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-276x400.jpg 276w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-186x270.jpg 186w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos.jpg 321w" sizes="(max-width: 206px) 100vw, 206px"><div class="caption"><h3>Alex Villalobos Jr.</h3><p>Inducted in 1993 Started his baseball career at the age of 16 in...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 0px; top: 577px;"><a href="https://elpasobaseballhalloffame.org/inductee/alonso-beltran/"><img width="205" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-698x1024.jpg 698w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-258x379.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-272x400.jpg 272w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-184x270.jpg 184w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran.jpg 735w" sizes="(max-width: 205px) 100vw, 205px"><div class="caption"><h3>Alonso Beltran</h3><p>Inducted in 2013 1989 and 1990 All District and All City selection for...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 831px; top: 606px;"><a href="https://elpasobaseballhalloffame.org/inductee/alton-stelley/"><img width="82" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-279x1024.jpg 279w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-258x948.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-109x400.jpg 109w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley.jpg 360w" sizes="(max-width: 82px) 100vw, 82px"><div class="caption"><h3>Alton Lawrence “Larry” Stelley</h3><p>Inducted in 2009 Leading hitter and pitcher on league champion Big 8 Food...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 637px;"><a href="https://elpasobaseballhalloffame.org/inductee/andre-rabouin/"><img width="286" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-258x271.png 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-381x400.png 381w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-257x270.png 257w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-16x16.png 16w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin.png 537w" sizes="(max-width: 286px) 100vw, 286px"><div class="caption"><h3>Andre C. Rabouin</h3><p>Inducted in 1998 Born in Bronxville, New York Played baseball at Andress High...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 985px;"><a href="https://elpasobaseballhalloffame.org/inductee/andrew-cohen/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg 263w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-258x387.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-180x270.jpg 180w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Andrew “Andy” Cohen</h3><p>Inducted in Original Class of El Paso Baseball Hall of Fame in 1988...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 1154px;"><a href="https://elpasobaseballhalloffame.org/inductee/andy-morales/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Andy Morales</h3><p>Inducted in 2008 Played baseball four years at Bowie High School under legendary...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 0px; top: 1178px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-sambrano/"><img width="202" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-258x383.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-269x400.jpg 269w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-182x270.jpg 182w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano.jpg 322w" sizes="(max-width: 202px) 100vw, 202px"><div class="caption"><h3>Armando “Sam” Sambrano</h3><p>Inducted in 1992 Started playing baseball at the age of 12 in 1933...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 1565px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-almanza/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-258x388.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-266x400.jpg 266w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-180x270.jpg 180w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza.jpg 500w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Armando Almanza</h3><p>Inducted as part of the 2012 El Paso Baseball Hall of Fame Silver...<span>Read More </span></p></div></a></li>
<div class="nav"><a href="https://elpasobaseballhalloffame.org/inductees/page/2/">Next Page »</a></div>
</ul>
The CSS:
ul#grid {
margin: 0 0 0 20px;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 10px 30px;
max-width: 257px;
}
#grid img {
height: auto;
width: 257px;
}
#grid .caption {
background: #ccc;
}
#grid h3 {
color: #aa1c29;
font-family: 'Graduate', cursive;
font-size: 25px;
line-height: 30px;
padding: 20px 10px 5px;
text-align: center;
}
#grid p {
color: #054872;
font-size: 18px;
font-weight: 400;
padding: 15px 10px;
}
#grid a {
text-decoration: none;
}
#grid span {
background: #fff;
border-right: 2px solid #cb2020;
color: #cb2020;
display: block;
font-family: "Ionicons", 'Lato', Calibri, Arial, sans-serif;
font-size: 14px;
font-weight: 400;
margin-top: 10px;
padding: 5px 10px 2px;
text-align: right;
text-transform: uppercase;
}
#grid .nav a {
display: none;
}
All of the positioning is controlled by the JS, available: https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/4.1.3/imagesloaded.min.js
I created a graphic that shows what I'm after: https://ibb.co/nF0Fxc
Anyone have any idea on what needs to change so those items are centered on the page?
Thanks,
Josh
So,
After e-mailing the author of the code, I followed his recommendation and I made my margins\list items percentages instead of specific values...this gives the grid the most flexibility, while allowing the page to scale nicely.
I have breakpoints that allow my columns to change from 4 to 3 to 2 and because the margins adjust accordingly, this works great!
The html output did not change, it still looks like:
<ul id="grid" style="position: relative; height: 2174px;">
<li style="position: absolute; left: 0px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/al-silva/"><img width="218" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-300x413.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-258x355.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-291x400.jpg 291w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva-196x270.jpg 196w, https://elpasobaseballhalloffame.org/wp-content/uploads/al-silva.jpg 317w" sizes="(max-width: 218px) 100vw, 218px"><div class="caption"><h3>Al Silva</h3><p>Inducted in 2000 Started his playing days at the Dan Ponder Little League...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alan-zinter/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/alan-zinter.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Alan Zinter</h3><p>Inducted in 2009 Four year letterman for Hanks High School All District and...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alberto-mendez/"><img width="198" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alberto-mendez-178x270.jpg 178w" sizes="(max-width: 198px) 100vw, 198px"><div class="caption"><h3>Alberto (Beto) Mendez</h3><p>Inducted in Original Hall of Fame Class of 1988 Started playing in the...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 831px; top: 0px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-gutierrez/"><img width="201" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-300x447.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-258x384.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-268x400.jpg 268w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez-181x270.jpg 181w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-gutierrez.jpg 590w" sizes="(max-width: 201px) 100vw, 201px"><div class="caption"><h3>Alex Gutierrez</h3><p>Inducted in 2006 Alex Gutierrez was the soul of baseball in the Lower...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 388px;"><a href="https://elpasobaseballhalloffame.org/inductee/alex-villalobos/"><img width="206" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-300x436.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-258x375.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-276x400.jpg 276w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos-186x270.jpg 186w, https://elpasobaseballhalloffame.org/wp-content/uploads/alex-villalobos.jpg 321w" sizes="(max-width: 206px) 100vw, 206px"><div class="caption"><h3>Alex Villalobos Jr.</h3><p>Inducted in 1993 Started his baseball career at the age of 16 in...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 0px; top: 577px;"><a href="https://elpasobaseballhalloffame.org/inductee/alonso-beltran/"><img width="205" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-300x440.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-698x1024.jpg 698w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-258x379.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-272x400.jpg 272w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran-184x270.jpg 184w, https://elpasobaseballhalloffame.org/wp-content/uploads/alonso-beltran.jpg 735w" sizes="(max-width: 205px) 100vw, 205px"><div class="caption"><h3>Alonso Beltran</h3><p>Inducted in 2013 1989 and 1990 All District and All City selection for...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 831px; top: 606px;"><a href="https://elpasobaseballhalloffame.org/inductee/alton-stelley/"><img width="82" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-300x1103.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-279x1024.jpg 279w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-258x948.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley-109x400.jpg 109w, https://elpasobaseballhalloffame.org/wp-content/uploads/alton-stelley.jpg 360w" sizes="(max-width: 82px) 100vw, 82px"><div class="caption"><h3>Alton Lawrence “Larry” Stelley</h3><p>Inducted in 2009 Leading hitter and pitcher on league champion Big 8 Food...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 637px;"><a href="https://elpasobaseballhalloffame.org/inductee/andre-rabouin/"><img width="286" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-300x315.png 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-258x271.png 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-381x400.png 381w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-257x270.png 257w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin-16x16.png 16w, https://elpasobaseballhalloffame.org/wp-content/uploads/andre-rabouin.png 537w" sizes="(max-width: 286px) 100vw, 286px"><div class="caption"><h3>Andre C. Rabouin</h3><p>Inducted in 1998 Born in Bronxville, New York Played baseball at Andress High...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 277px; top: 985px;"><a href="https://elpasobaseballhalloffame.org/inductee/andrew-cohen/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen.jpg 263w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-258x387.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/andrew-cohen-180x270.jpg 180w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Andrew “Andy” Cohen</h3><p>Inducted in Original Class of El Paso Baseball Hall of Fame in 1988...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 1154px;"><a href="https://elpasobaseballhalloffame.org/inductee/andy-morales/"><img width="300" height="191" src="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-300x191.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-258x164.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039-425x270.jpg 425w, https://elpasobaseballhalloffame.org/wp-content/uploads/img_039.jpg 500w" sizes="(max-width: 300px) 100vw, 300px"><div class="caption"><h3>Andy Morales</h3><p>Inducted in 2008 Played baseball four years at Bowie High School under legendary...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 0px; top: 1178px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-sambrano/"><img width="202" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-300x445.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-258x383.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-269x400.jpg 269w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano-182x270.jpg 182w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-sambrano.jpg 322w" sizes="(max-width: 202px) 100vw, 202px"><div class="caption"><h3>Armando “Sam” Sambrano</h3><p>Inducted in 1992 Started playing baseball at the age of 12 in 1933...<span>Read More </span></p></div></a></li>
<li style="position: absolute; left: 554px; top: 1565px;"><a href="https://elpasobaseballhalloffame.org/inductee/armando-almanza/"><img width="200" height="300" src="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg" class="attachment-medium size-medium" alt="" srcset="https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-300x451.jpg 300w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-258x388.jpg 258w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-266x400.jpg 266w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza-180x270.jpg 180w, https://elpasobaseballhalloffame.org/wp-content/uploads/armando-almanza.jpg 500w" sizes="(max-width: 200px) 100vw, 200px"><div class="caption"><h3>Armando Almanza</h3><p>Inducted as part of the 2012 El Paso Baseball Hall of Fame Silver...<span>Read More </span></p></div></a></li>
<div class="nav"><a href="https://elpasobaseballhalloffame.org/inductees/page/2/">Next Page »</a></div>
</ul>
The CSS:
/* Grid */
#grid img {
height: auto;
width: 100%;
}
#grid .caption {
background: #ccc;
}
#grid .term {
background-color: #ffffcc;
border-radius: 2px;
display: inline;
margin: 0 2px;
padding: 2px 4px;
}
#grid h3 {
color: #aa1c29;
font-family: 'Graduate', cursive;
font-size: 25px;
line-height: 30px;
margin-bottom: 5px !important;
padding: 20px 10px 5px;
text-align: center;
}
#grid p {
color: #054872;
font-size: 18px;
font-weight: 400;
padding: 15px 10px;
}
#grid a {
text-decoration: none;
}
#grid span {
background: #fff;
border-right: 2px solid #cb2020;
color: #cb2020;
display: block;
font-family: "Ionicons", 'Lato', Calibri, Arial, sans-serif;
font-size: 13px;
font-weight: 400;
margin-top: 10px;
padding: 5px 10px 2px;
text-align: right;
text-transform: uppercase;
}
#grid .nav a {
display: none;
}
/* Media */
@media screen and (max-width: 600px) {
ul#grid {
margin: 0 3%;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 3% 30px;
max-width: 44%;
}
}
@media screen and (min-width: 601px) and (max-width: 849px) {
ul#grid {
margin: 0 2%;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 2% 30px;
max-width: 29.37%;
}
}
@media screen and (min-width: 850px) {
ul#grid {
margin: 0 1.16%;
padding: 0 !important;
}
#grid li {
list-style-type: none;
margin: 0 1% 30px;
max-width: 23%;
}
#grid a:hover span {
background: #eee;
}
#grid img:hover {
opacity: 0.95;
}
}
So, what I am doing is adjusting the margins so everything fits within the given window. The percentages on the margins and the list items is controlling the grid and allows the page to be scaled without showing all that white space that I initially had. This matches the behavior of the picture galleries that I am using on that site, so it's a good solution for me.
Thanks,
Josh