[Support request] Buttons on mobile

Home Forums Support Buttons on mobile

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #955265
    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 AMAZONVIEW 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

    #955363
    David
    Staff
    Customer Support

    Hi there,

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

    (like scrolling, eh? – made me laugh )

    #955366
    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..)

    #955387
    David
    Staff
    Customer Support

    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.

    #955406
    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!

    #955807
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.