3 Buttons Inline not responsive for mobile - help

Store Design
, ,
1

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:

CallCallCall

(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

2

Hi @dayvb ,

Rename the class as follows:

Call Call Call

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 !

3

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

4

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

5

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

6

Got it working!

Thanks for your help.