New galleries break my CSS, solution?

  • timbearcub

    (@timbearcub)


    3 years ago

    Hi – I used to be able to do this with the pre-5.9 gallery format (scroll down 4 images, I would add a internal anchor but it would nuke this)

    Basically I created some CSS code with a custom class to reduce the margins so the two images are next to each other, like the ‘double spread’ of a book. Here’s what I did before and tried to adapt:

    .doublespread .wp-block-gallery .blocks-gallery-item:first-child, .doublespread .blocks-gallery-grid .blocks-gallery-item:first-child {margin-right:0px}

.doublespread .wp-block-gallery .blocks-gallery-item:nth-of-type(2) .doublespread .blocks-gallery-grid .blocks-gallery-item:nth-of-type(2) {margin-right:16px}

.doublespread .blocks-gallery-grid, .doublespread .wp-block-gallery {margin-left:0}

.noborder .wp-block-gallery .blocks-gallery-item, .noborder .blocks-gallery-grid .blocks-gallery-item {margin:0px}
.nodoobrie:after {
	content:normal !important;
}

    But as much as I try to adapt this for the new gallery format, it does nothing. The images sit side by side with a gap.

    An example: – https://www.tjbaker.co.uk/2022/01/27/portraits-at-the-pub-eljai/#drawing-class

    Weirdly the old galleries stay as they are, but as soon as I resave them – it breaks my code and a gap appears.

    It feels like something that should be SUPER easy – and it’s not weirdly. Is there a way I can do this easily with a plugin or bit of code? Seems that the new gallery system makes it really hard to do this. I find in someways better – the updating of captions etc which used to be flakey, but selecting the whole gallery in the editor? Weirdly harder.

    BTW I’d rather stick with things that use/adapt the default gallery shortcode, rather than custom shortcodes – cos I’ve had a nightmare with plugins going unsupported with custom codes leaving me to edit hundreds or thousands of old posts!

    • This topic was modified 3 years ago by James Huff. Reason: redundant link removed

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    It looks like something is amiss with your selectors, your margin-right: 0; isn’t applied to the left hand image as it should. I added this in my browser’s element inspector tool and it removes the gutter spacing:

    .doublespread {
    margin-right: 0 !important;
}

    It might be applied too broadly, and the !important was necessary, but it’s at least going in the right direction.

    I don’t think you mentioned where you added your CSS. Usually the Additional CSS section of the customizer is the best place.

Viewing 1 replies (of 1 total)
  • The topic ‘New galleries break my CSS, solution?’ is closed to new replies.