Hi,

Two Quick Tips:

1. If you used two different Button addons, you can set also Margin (top/right/bottom/left) then it will help to have space between them, also on mobile view. No CSS hacks, just basic settings.
2. Instead of using columns and two separate addons, you could use Button Group addon (LESS IS MORE)

Thanks Paul, but if I use a button group add-on, I wouldn't be able to display these two buttons side by side like I'm trying to mimic this homepage with their button side by side on top of their image: https://moshield.com/

in that case use tip No 1

If you need a video guide ping me tomorrow (+10h), I am going sleep now, sorry late hour.

BTW

As I saw on moshield they used extra CSS

@media (max-width: 767px) {
  .mos-btn-alt {
    width: 100%;
    max-width: 350px;
  }
}

to improve view on iphone. But also margin value for buttons.

as 1st step, for both buttons

you can use 10px

Hi Paul, I am already using 2 different button addons in a row. Just to confirm, that is the setup (#1) that you're suggesting right? inside a row? Thanks Janel

https://photos.app.goo.gl/xX6xjZL9fMJZfiDb6

yes , my today setup is/was for #1

2nd step. To make it "nice", inside internal Row add ID name (in Row settings), for example, action-buttons

3rd step, if you done 1 & 2nd as I asked.

Now we will grab an idea from moshield site.

@media screen and (max-width: 680px) {
#action-buttons  .sppb-btn {width: 100%;max-width: 320px;  display: block;}
}

as you see, this is still CSS basics. To be honest, using 3rd step (with extra margin value) you could replace first step. But it's worth to know how, and for is (1).

You still need to do 2 & 3 step exactly as told you.

But even now on mobile view I see 10px space between buttons.

You added ID name in wrong Section, it was screenshot with red arrow !!!

and there is missing "and" here

@media screen and (max-width: 680px) {

No morning Coffee ?? ;) please look again, and correct mistakes.

2nd step OK, I see ID name in correct place.

And I did the 3rd step by adding the CSS you suggested below that int he Custom CSS field. Does it look good now to you?...thanks again Paul

about 3rd step, I see that extra CSS line is needed, becuase of your grid settings (I didn't see it before), so here is NEW step 3:

@media screen and (max-width: 680px) {
#action-buttons  .sppb-btn  {width: 100%;max-width: 320px; display: block; margin: 5px auto;}
 .sp-page-builder .page-content #action-buttons {width: 100%;}
 }

and you own me Orange juice, becuase I don't drink coffee.

AFTER on IPHONE

After wine, I cannot write stright , hahaha

I don't see updated CSS code in action.

I'm positive that I added your updated CSS into the Custom CSS field below Section ID action-buttons inside "Buttons on Homepage Image"