[Support request] Buttons on mobile

[Clare]

Hi Guys
I am sure i’m being an idiot not being able to work this out for myself… but please help!
I’m using two side by side buttons for affiliate links to different platforms using html in the block editor of WP

The html looks like this:
VIEW ON AMAZON   VIEW AT REI<p></p>

They come out perfectly side by side on desktop, but when I look at mobile, they are stacked one on top of the other with no space underneath. How do I put a space between them? If you look at my website on a mobile, you’ll see the issue 🙁

Any help would be greatly appreciated!
Clare

[David]

Hi there,

could you link us to a post/page where we can see the buttons ?

(like scrolling, eh? – made me laugh )

[Clare]

https://thehikingadventure.com/best-hiking-socks

Try this one – so I clearly have something mixed up in my head as I’ve made the buttons side by side using that HTML code, but obviously in order to space them on desktop I just put a couple of ‘spaces’ … which DUH – obvioulsy won’t make them responsive.

Ideally, and maybe this is do-able with columns (but gutenberg columns doesn’t seem to allow you to change the width of the column) ..

I’d kind of like them to look like this (I think they are using a pagebuilder maybe?)
https://www.theadventurejunkies.com/best-base-layer-for-cold-weather-hiking/
(scroll past all the tables and garbage at the top..)

[David]

So this CSS would stack them 100% width on mobile with 10px space:

@media (max-width: 414px) {
    a.button {
        margin-bottom: 10px;
        width: 100%;
        box-sizing: border-box;
    }
}

That other site is using thrive. I can help style the buttons to look similar if you want? Would that apply to all buttons? Let me know.

To keep them side by side would need some extra HTML around the buttons and some other CSS. Let us know also.

[Clare]

I thought they might be using Thrive… I HATE thrive and have recently de-thrived my site to just use GP and Gutenberg 🙂

I’d LOVE to keep my buttons the colors etc that I have, but to make them side by side without using columns so that they are closer together (does that even read like English??) and then stack on mobile if necessary.

I’ll try that CSS in the meantime and see what happens. I’m such a bonehead about all this stuff I know just enough to make myself dangerous 🙂

Thank you SO much for all your help!

[David]

You’re welcome

[Author]

Posts