How to design a guide with two or more building blocks side by side?

Comments

5 comments

  • Avatar
    Liz Feller

    Yes :) you would need to adjust your "stacking" blocks' margins to accomplish this, if you give them all the same right/left margin then they naturally stack up. So you would not use the "add side-by-side" function, just manually adjust margins for left/right to get the horizontal alignment you want before adjusting top/bottom for vertical alignment.

     

    2
    Comment actions Permalink
  • Avatar
    Glenda Araya

    That worked, thank you very much Liz for the recommendations. ⭐️

    Just to clarify what I did was just stack the blocks on top of each other, none to the side, and use the negative margins to make everything go where I wanted.

    To adjust the margins of an image you must first upload it in real size, to avoid distortion.


    1
    Comment actions Permalink
  • Avatar
    Glenda Araya


    Liz Feller I was able to fix all the margins and in the designer it looks good, but in the preview and in the test environment the margins are out of order, I don't know if there is a class that is being default. Did that happen to you too?

    Pendo designer:

     

     


    Preview mode and QA


    0
    Comment actions Permalink
  • Avatar
    Liz Feller

    I haven't seen this specifically, but I have experience where negative margins make it a little wonky outside the editor when lining things up. I have had to compensate for that by intentionally making it "misaligned" while editing, so that in prod it's correct.

    In editor:

    In production:

    0
    Comment actions Permalink
  • Avatar
    Joshua Gragg

    Is this supported in Mobile App Guides as well, or is this a Web Guide only feature? My mobile guides don't seem to allow me to layout elements side-by-side.

    0
    Comment actions Permalink

Please sign in to leave a comment.