Support » Plugin: GenerateBlocks » align wide margin issue

  • Resolved Keirwatson

    (@keirwatson)


    Bug report?

    I have inserted a GB container block with wide-width, and I can see that this generates css with the appropriate negative margin-left. All right and good.

    If, however, I then give the block a top margin of, say, -4em, the block creates css of margin: -4em 0 0 (even though I have left the other margin fields blank), which overrides the alignwide margin-left, misplacing the container horizontally. It would be better if it only applied margin-top: -4em.

Viewing 10 replies - 1 through 10 (of 10 total)
  • 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!

    Thread Starter Keirwatson

    (@keirwatson)

    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 🙂

    Thread Starter Keirwatson

    (@keirwatson)

    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)

    In this case it seems to be working?: https://www.screencast.com/t/1zQ01LjrvIp

    Thread Starter Keirwatson

    (@keirwatson)

    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:

    https://i.imgur.com/PcnYmnR.png

    Plugin Author Tom

    (@edge22)

    Strange, not seeing it on Safari, either. What version are you using?

    Thread Starter Keirwatson

    (@keirwatson)

    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! 🙂

    Thread Starter Keirwatson

    (@keirwatson)

    Pleased to help.

    Love your work.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘align wide margin issue’ is closed to new replies.