Gallery right margin hide

  • nicallen

    (@nicallen)


    6 years, 11 months ago

    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 http://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)

    6 years, 11 months ago

    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)

    6 years, 11 months ago

    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.