What's your biggest current challenge? Have your say in Community Polls along the right column.

3 Buttons Inline not responsive for mobile - help

Solved

3 Buttons Inline not responsive for mobile - help

dayvb
Tourist
24 0 2

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

Accepted Solution (1)

BSS-Commerce
Shopify Partner
3477 463 547

This is an 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 !

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 5 (5)

BSS-Commerce
Shopify Partner
3477 463 547

This is an 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 !

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
dayvb
Tourist
24 0 2

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
Shopify Partner
3477 463 547

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 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
dayvb
Tourist
24 0 2

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
Tourist
24 0 2

Got it working! 

 

Thanks for your help.