Responsive button gaps

  • Resolved KS

    (@karl19)


    2 years, 10 months ago

    Hello, there is a small issue with multiple advanced buttons when they stack. If “Gap Between Next” is set to a value (say 20px), if the buttons stack on mobile then this gap remains as right margin and the buttons may become misaligned.

    It seems like this was an issue previously https://www.ads-software.com/support/topic/advanced-button-spacing-next-button/, would be great if this could be something to be looked at.

    Perhaps an option would be to split gap to left/right margin, ie if the gap is 20px, then instead of:

    margin-right: 20px;

    it would be:

    margin-left: 10px;
margin-right: 10px;
Viewing 8 replies - 1 through 8 (of 8 total)
  • hannah

    (@hannahritner)

    Hey,
    Thanks for reaching out! I’m having a hard time replicating this. Can you send a screenshot? Can you also confirm that you’re running the latest version of Kadence Blocks?

    Kindly,
    Hannah

    Thread Starter KS

    (@karl19)

    Hello and thanks for the reply! I actually just realised that it’s possible to set “Gap Between Next” for each button, beforehand I thought it was a general value for all buttons.

    Perhaps that makes it a bit tricker to solve. The issue I’m having is when buttons stack (which might happen on Desktop or Mobile), the margin is always added to right-hand side. The last button gets margin-right 0 and buttons get misaligned https://pasteboard.co/ygjFzHPD2iMo.png

    My initial thought about splitting the margin and adding half to each side rather than just right-hand side gets a bit more complicated if buttons have different gap-between-next.

    Plugin Support karlalevelup

    (@karlalevelup)

    Hello,

    If they stack vertically on mobile views, you can set the Gap Between Next option to 0 – https://share.getcloudapp.com/WnukO2Bb. Make sure you click the mobile icon first so the value will only be applied starting on the screen width 768px.

    Please try the above step and let us know if it works for you. If not, kindly give us a link to your web page so we can inspect your buttons’ styles.

    Kind Regards,
    Karla

    Thread Starter KS

    (@karl19)

    Hi Karla, thanks for the reply!

    The problem with just removing gap between on mobile, is that depending on the length of the button labels, one doesn’t know exactly when buttons will stack. That might be above or below 768px. If I have numerous buttons with long texts, they might stack already before 768px.

    Perhaps there isn’t a universally clean way of solving this.

    hannah

    (@hannahritner)

    Hi KS,
    If you post a link we would be happy to try and work out some css that would help this flow better for all screens.

    Kindly,
    Hannah

    Thread Starter KS

    (@karl19)

    Hello Hannah, that’s very kind of you, however in this case I have already solved it with a bit of CSS. My main consideration was more whether the logic behind how gaps get calculated could be improved. But perhaps my issue was more of an anomaly.

    can you please attach the image file with the problem description, so we can better understand the actual problem and will give you best possible answer?

    hannah

    (@hannahritner)

    Glad you were able to resolve this, @karl19!

    Best,
    Hannah

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Responsive button gaps’ is closed to new replies.