Archived topic

Gutenberg Gallery Indent CSS Issue

5 replies · Started by Sacha on July 22, 2021

Viewing posts 1–6 of 6

July 22, 2021 at 8:18 pm #1867192

I've tried searching with no luck. I think this should just be basic CSS but I am awful at it.

I followed a thread here to change the indentation on my lists in my post content. That works fine.

Here's the snippet for reference:

.entry-content ul, .entry-content ol {
margin-left: 1em;
}

This causes a slight issue with the default Gutenberg galleries though.

I can see that the galleries also use some sort of list item and the result is that the galleries are now indented more than the content.

I can see that the grid has a class, just not sure what CSS to use to prevent the default margin from being applied to it to.

The class of the gallery:

Please could you assist it providing the CSS to exclude this item from also having the indentation.

Many thanks in advance

July 23, 2021 at 12:23 am #1867318

Hi Sacha,

We can change the CSS a bit to make it more specific to the gallery grid.

Example:

.entry-content .blocks-gallery-grid {
margin-left: 1em;
}

July 23, 2021 at 12:30 am #1867327

Hi Elvin

Thanks. However I want to stop the indentation being applied to the gallery. Please see the example I have added in the private notes.

July 23, 2021 at 1:41 am #1867398

Ah my bad. You want it the other way around.

We can do it like this then:

.entry-content ul:not(.blocks-gallery-grid) {
margin-left: 1em;
}

We're basically making use of CSS's :not() pseudo class. :D

July 23, 2021 at 5:15 am #1867629

Thanks Elvin

Actually I just changed the cod you sent to this:

.entry-content .blocks-gallery-grid {
margin-left: 0em;
}

It seems like it's working fine now.

Do you think that's fine or should I amend it to what you've attached?

Many thanks

July 23, 2021 at 9:45 am #1868182

Hi there,

the code have used - that will do for removing the indent on the gallery only. So it looks good to me.

This archived topic is closed to new replies.