Can a button be to the right of text on the same line, when viewed on a mobile?

[core365]

Hi, I’m working on a site and in one column I’ve got a line of text and then a button (to show a phone number) to the right of it, which I’ve used the Flexbox Layout on the column so it displays how I want it when viewed on the desktop. The trouble is, when I switch to the ‘XS 480px or smaller’ view, the button goes onto a separate line instead of being on the same line as the text and I can’t figure out how to change it so the button is on the same line!

I hope you can help!

I’ll put the URL in a secure note as it’s on a temp link.

Here’s a screen grab when viewed on the smaller screen size, the phone number goes onto a separate line to the text.

Thanks!

[lely]

Hi @core365,

Let’s digest the structure so you understand how it happens.
First, text element is a block with auto width. On desktop it is side by side because when it was added on the column, there is still enough space to display the button on the right. On mobile view, it doesn’t have extra space for the button because of its block property and it also occupies the entire width already. It is possible if you will explicitly set the width of the text element to let’s say 50% on mobile view to give some space for the button on the right.

See this: https://screencast-o-matic.com/watch/cYhq1Ck4Ts
Note when adding custom CSS on the Customize Tab > Inline CSS: Use the $el to target element.

Hope this helps.

[core365]

Hi @lely,

Many thanks for your explanation and screen cast, both were very useful, it’s much appreciated!

Thanks!

[friech]

You’re most welcome,

Cheers!