Plugin Author
Tom
(@edge22)
Hi there,
Ah, this happens because GenerateBlocks writes the shorthand CSS for you when it comes to margin/padding.
I’ll look into our options here.. it would be a shame to lose that shorthand CSS because of something like align-wide.
One solution is to wrap your container in another container, and align-wide the outer container. Kind of page-builder-y, but it should work.
I’ll see if we can implement something better 🙂
Thanks!
As a matter of interest, I found that the headline block does not have this problem.
I know it does not have a Wide Width button, but I just add “alignwide” in the css class advanced field.
In this case the shorthand css for my top margin (-4em 0 0) is output before the alignwide, so the alignwide left margin overwrites it and behaves as expected.
I don’t know if you can make this behaviour happen for other blocks?
——-
Suggestion: Blank vs 0 values?
The intuitive behaviour (from a user perspective) is that only margin-top should be set if I only fill in the top margin value. I would only expect the compact output if I chose 0 in the other fields. As it is, these fields can be left blank, (or deleted to make them blank). The fact I can choose 0 or blank gives the impression that these options produce different results.
If your preference is that casual users get the compact version then present the fields with a default value of 0, but allow these to be deleted (blank) forcing margin-top etc.
Plugin Author
Tom
(@edge22)
Interesting – any chance you can link me to an example with the Container and Headline block?
I agree. We actually do this on tablet/mobile (so they inherit desktop values), but decided against it on desktop. I’ll look at this to see if it’s something we can do without negatively affecting existing sites 🙂
I have set up a brief demo at the end of an old post: https://herbidacious.calamus.graphics/2010/04/04/20/
Hope that helps.
(Note: I’ll delete the demo it in a couple of days)
Plugin Author
Tom
(@edge22)
OK, I see, it seems to be browser specific.
The problem shows on my default browser (Safari) but is correct on Chrome.
Here is a screenshot from my Safari browser:
View post on imgur.com
Plugin Author
Tom
(@edge22)
Strange, not seeing it on Safari, either. What version are you using?
After a bit of trial and error, I have worked out that the problem (as shown in the screenshot I linked) only arises when a post is previewed.
It does this when previewed in Chrome too, so it isn’t browser specific.
For some reason in post preview the css for .gb-container gets a higher priority than .entry-content .alignwide leading to the container margins overwriting the margin-left – as shown in my screenshot above, whereas once published these reverse so the problem does not appear.
The same problem arises if the grid block is used, but not if the Headlines block is used.
Plugin Author
Tom
(@edge22)
Ah, that makes sense. When previewing, inline CSS is used over the external file. Perhaps we just need to push the inline CSS down further in the document to prevent this from happening. I’ll play with it.
Thanks for letting me know! 🙂
