Better Gallery Alignment in Twenty Seventeen

The new theme Twenty Seventeen shows the right thumbnail image in the default 3-column gallery with just a little space to its right,  which is particular noticable when you post a full width image directly above or below the gallery.

To have clear left and right lines in your site, add this CSS to your theme, either into style.css of a child theme, or into the ‘Appearance – Customize – Additonal CSS’:

/*aligning 3-column gallery*/

.gallery-item {
  margin-right: 4%;
  padding-right: 0;
  width: 48%;
}
.gallery-item:nth-child( 2n ) {
  margin-right: 0;
}
@media screen and (min-width: 30em) {
  .gallery-columns-3 .gallery-item {
    padding-right: 0;
    width: 31.5%;
    margin-right: 2.75%;
  }
  .gallery-columns-3 .gallery-item:nth-child( 3n ) {
    margin-right: 0;
  }
}

If you want to change the gallery to show one column only in narrow browsers such as mobile phones, change the CSS to this variation:

/*aligning 3-column gallery - variation*/

.gallery-item {
  padding-right: 0;
  width: 100%;
}
@media screen and (min-width: 22em) {
  .gallery-item {
    margin-right: 4%;
    padding-right: 0;
    width: 48%;
  }
  .gallery-item:nth-child( 2n ) {
    margin-right: 0;
  }
}
@media screen and (min-width: 30em) {
  .gallery-columns-3 .gallery-item {
    padding-right: 0;
    width: 31.5%;
    margin-right: 2.75%;
  }
  .gallery-columns-3 .gallery-item:nth-child( 3n ) {
    margin-right: 0;
  }
}