Gallery right margin hide

  • Hi Me again. I used the code Michael(@alchymyth) supplied which was fine, for only three columns but now I need to use 4, 5, and 6 columns. When I do they space unevenly. I have removed the previous css edit, obviously the gallery has reverted to showing the right margin on the last item. How would the code below be edited to include up to six items. I have removed the css below.

    demo at https://www.nicallen.com/hbs/?page_id=132

    .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: 32%; margin-right: 2%; }
    .gallery-columns-3 .gallery-item:nth-child( 3n ) { margin-right: 0; }
    }
    @media screen and (max-width: 30em) {

    .gallery-columns-3 .gallery-item {
    min-width: 100%;
    }
    }

    PS I am using a child theme which has the full width page fix applied.

    Thanks Best wishes Nick.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter nicallen

    (@nicallen)

    Solved by some one great on github
    /* WordPress Gallery
    —————————————— */

    .gallery {
    margin-left: -0.5em;
    margin-right: -0.5em;
    }

    .gallery:after {
    display: table;
    content: “”;
    clear: both;
    }

    .gallery-item {
    margin: 0;
    float: left;
    padding: 0.5em;
    }

    .gallery-item img {
    width: 100%;
    }

    .gallery-columns-1 .gallery-item {
    width: 100%;
    float: none;
    }
    .gallery-columns-2 .gallery-item {
    width: 50%
    }
    .gallery-columns-3 .gallery-item {
    width: 33.3333%
    }
    .gallery-columns-4 .gallery-item {
    width: 25%
    }
    .gallery-columns-5 .gallery-item {
    width: 20%
    }
    .gallery-columns-6 .gallery-item {
    width: 16.6667%
    }
    .gallery-columns-7 .gallery-item {
    width: 14.2857%
    }
    .gallery-columns-8 .gallery-item {
    width: 12.5%
    }
    .gallery-columns-9 .gallery-item {
    width: 11.1111%
    }

    .gallery-columns-2 .gallery-item:nth-child(2n+1),
    .gallery-columns-3 .gallery-item:nth-child(3n+1),
    .gallery-columns-4 .gallery-item:nth-child(4n+1),
    .gallery-columns-5 .gallery-item:nth-child(5n+1),
    .gallery-columns-6 .gallery-item:nth-child(6n+1),
    .gallery-columns-7 .gallery-item:nth-child(7n+1),
    .gallery-columns-8 .gallery-item:nth-child(8n+1),
    .gallery-columns-9 .gallery-item:nth-child(9n+1) {
    clear: left;
    }

    Thread Starter nicallen

    (@nicallen)

    credit where credit is due https://gist.github.com/cramdesign/10943010 this works in twentyseventeen.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Gallery right margin hide’ is closed to new replies.