Inconsistent button alignment

I Need Help
1

Please bear with me, this might be difficult to follow.

I have a page which features a series of 4 alternating, 2 column sections in desktop view: photo left/ text right (right alignment), photo right/ text left (left alignment). Each text element has a corresponding button that adheres to the relative left or right alignment.

…are you with me so far?

This doesn’t display well on a mobile screen so I hide the images and align the buttons to centre. When I return to desktop view, the right aligned buttons are in the correct place, but the left align buttons are now cantered. If I re-left-align them, the mobile view also aligns them to the left. Repeat, ad infinitum.

Any ideas?

2

You could try copying that particular bloc, calling the old one ‘desktop’ and the new one ‘mobile’.

Tune the desktop one so that it is how you want it.

Adapt the new ‘mobile’ bloc so it renders well on mobile.

Bingo – but someone else may have a better solution!

1 Like
3

I am correct assuming you’re setting the layout while working in “desktop” view?

Because the changes are set “top down”, which means any change in desktop will also be set in tablet and mobile views. But if you set a change in for example “tablet” view, “desktop” will not be altered, but mobile will.

1 Like
4

Thanks for your answer. That would be a solution (one which I’d considered), but I’m far too lazy to create a duplicate bloc with a different ‘visibility’ for each breakpoint :slight_smile:

5

Thanks for your answer. I am designing primarily in desktop view, then making necessary layout changes at various breakpoints (if/ when required). However, the button alignment issue remains, regardless if I make the changes at a smaller breakpoint; the desktop view still changes. I even tried removing the button and reading it at the smallest breakpoint; but no luck.