-
I enabled the GP typography manager on a site and all the paragraph margins got screwed.
I found this topic that says it is due to WP removing margins in WP6.1 and it says to use the CSS
figure, .wp-block-image figure { margin-bottom: 1.5em; }I don’t know why it was fine before enabling GP typography, even though I was using WP 6.5
Anyways, the above CSS doesn’t work for galleries that are aligned to the center.
I have put a test page in the hidden section that includes the CSS. If you look at the two galleries at the bottom, one has align:none, and it works fine with this CSS. The other, with align:centre, still has no margin between the gallery and the paragraph below it.
How can I adjust this CSS to fix this?
thanks
-
I don’t know why it was fine before enabling GP typography, even though I was using WP 6.5
The typography module is always on by default, it comes with the free GP theme, and there isn’t an option to turn it on/off. Were you using a custom function to disable it?
Try adding
!importantto the CSS:figure, .wp-block-image figure{ margin-bottom: 1.5em !important; } -
I was not using the Dynamic Typography Manager.
I have been a GP user since before it was introduced, which means I had to opt in to use it. I had shied away from doing that for a few years because it broke some stuff. This is one of those things.
Perhaps I used the wrong terminology, which is causing your confusion. I should have said Dynamic Typography Manager instead of GP Typography.
The edit to the CSS you have provided does not work correctly. If you apply it in the browser tools, you will see that adding !important causes a margin between the bottom of the gallery and the caption, as well as the bottom of the caption and the following paragraph.
Screenshots added to private section for clarity
I only want to add the margin between the bottom of the bottom of the caption and the following paragraph.
-
I see 🙂 can you try this?
figure, .wp-block-image figure, figure.wp-block-gallery { margin-bottom: 1.5em; } -
This is better, but I can see another issue now we have this.
On my test page, if you scroll up to the first single image with a caption, you can now see that actually WordPress (or GP?) is defining a 1em bottom margin on figcaption.
So this means that on a single image block that has a caption, there are now two bottom margins. One from our custom CSS and one from the core CSS.
-
Oh, nevermind, I think I fixed that by simplifying it to
figure, figure.wp-block-gallery { margin-bottom: 1.5em; }That seems to fix things for images, images with captions, galleries, and galleries with captions.
I still don’t really understand why you don’t want to included this CSS in the theme, though. I know there were concerns that WP might add their CSS back again, but surely you would see that in a beta and know to remove this from the theme at that time.
Does anyone really want to install GP and immediately have the experience of needing to mess around with custom CSS just to get basic spacing between images and paragraphs?
-
I get your point, but we have our own concerns too 🙂
Glad you got it to work!
-
Your concerns cost me an hour of messing around trying to fix this and creating tickets, though. All after simply enabling one of your features. Is Generatepress moving more towards being a theme only for developers? I can’t think why else you’d want to ship a theme that needs immediate custom CSS to make a post look halfway decent. I’m a one-man band. I don’t have a team of developers behind me, nor do I want to use a theme that requires custom CSS for basic functions. If that is where things are headed, I’d like to know.
- You must be logged in to reply to this topic.