3 Buttons Inline not responsive for mobile - help

[dayvb]

I am trying to get three buttons to resize and stay inline when the page is viewed on mobile. 

I have very basic coding knowledge but I have managed to get the three buttons to display inline on desktop, but on mobile, they look terrible.

This is the code I have on the page: 

<p><a class="button" href="tel:01412803398">Call</a><a class="button" href="tel:01412803398">Call</a><a class="button" href="tel:01412803398">Call</a></p>

(right now I've just duplicated 1 button)

What will I need to do to get these buttons to resize and stay inline when the page is viewed on mobile?

I looked for the section in the code editor that has the button code but couldn't find it. Im hoping there is something I can add to the page code to make it work rather than changing the site-wide button code.

This is the page I am testing on. The buttons are at the bottom of the page.  https://macgregorandmacduff.co.uk/pages/test-page-23

Thanks in advance

[BSS-Commerce · Accepted solution]

Hi @dayvb ,

Rename the class as follows:

<p class ="call-wrapper">
    <a class="call-button" href="tel:01412803398">Call</a>
    <a class="call-button" href="tel:01412803398">Call</a>
    <a class="call-button" href="tel:01412803398">Call</a>
</p>

Then go to Assets->base.css and add this code:

@media only screen and  (max-width:1240px){
   .call-wrapper {
    display: flex;
    flex-direction: column;
    align-items:center 
   }
   .call-button {
    margin-left: 10px;
        margin-bottom: 10px;
   }
}

Hope it's useful to you @dayvb !

[dayvb]

Hi @BSS-Commerce ,

Thanks very much for the suggestion.

I had a look in the assets but couldn't find base.css

Could my file be called something different or could I add it somewhere else?

Thanks

I had a look for 

[BSS-Commerce]

Hey @dayvb ,

Please try to find the style.scss.css file in the Assets section then add the code above as I instructed.

I hope it helps! @dayvb 

[dayvb]

Hi @BSS-Commerce ,

Yes! I found style.scss.css.

I added it and functions the way I am looking for it to function, but is it possible to have it use our default .button style?

I tried editing your code but got nowhere.

Thanks again

[dayvb]

Got it working! 

Thanks for your help.