Mobile buttons side by side

Support
#1

Is it possible to get 2 buttons to be next to each other on mobile?
I have tried using the code in the forum for getting two columns on mobile but haven’t got it to work.
I used…

@media (max-width: 480px){
   .cols2 {
        width: 47%;
    }
}
#2

Hi Clefler,

If the buttons have the cols2 class, please update your code to:

@media (max-width: 480px){
   .cols2 {
        width: 47%;
        float: left;
        margin-right: 1%
    }
}

In case this does not work, please provide the URL of the page in question.

Thank you.

#3

Great thanks that works!
Just to add…only the left button should get the class to work properly.
thx again

#4

You’re welcome!

#5

Hi again, when using the code you provided, the left button gets sort of hidden and is not selectable in the editor and the live button is not able to be pressed on a live site on mobile.

Also, I have found that the width and margin css is not needed either way.

Here are 3 pages I have used this on:



Thanks for the help!

#6

Hello @Clefer,

Please update your code and use this:

@media (max-width: 767px){
   .cols2 {
        display: block;
        float: left;
        margin-left: 0%;
        z-index: 9999;
    }
}

Hope this helps.

#7

sorry i tried that and it didn’t work bot for being selectable in the editor and being clickable online

#8

Hey @clefler,

The design “2 buttons to be next to each other on mobile” can only be achieved at a certain level. The same is true for the solutions. I will not continue on my colleagues’ code because they’re currently not available so I could not forward thist to them and I’m not sure how they’re going to solve this with their code.

I would instead offer you 2 possible solutions or routes you could follow but first, you need to answer this question: What about the smaller screens where your buttons stack?

1. Do you want to reduce the button’s font size so that the buttons will get smaller but sacrificing readability (strongly not recommended)? If this is your choice, shrinking the button’s text size is possible. Please watch this demo at https://youtu.be/SdQHpAgFumw

2. I’d recommend that you allow stacking instead but center the buttons?

To do that, please follow the setup in this screencast: https://youtu.be/wO7orgFwE5I

Below is the code in the video but please at least learn how to use it.

$el {
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

@media (max-width: 360px) {
  $el .x-anchor-button {
    margin: 0 auto 1em;
  }
}

Below are resources related to the features used in the video.

Please also note that custom coding is not a part of our support service. We only showed what’s possible but we will not support issues arising from the use of custom code and further enhancements.

Hope that helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.