How to build 2 buttons side by side??

RedTail · August 2018

Please see my website at https://saddlebackeye.com/. Shrink the browser width to emulate mobile and you'll see 2 buttons titled "Call Us" and "Find Us". I have defined them in the Muffin Builder to be 1/2 and 1/2 columns. But they display on 2 different lines.

How can I get these 2 buttons to be side by side on 1 single row??

Thank you!

Pablo · August 2018

Hi,

They are in same wrap, that's why.

You have to make them in two different wraps

Thanks.

RedTail · August 2018

I have tried doing as you say with no success. Is there special css that must be included? Please help me to solve this. Thank you!!

RedTail · August 2018

There is some issue related to the mobile view of buttons that are designed to be side by side in a single row. I can not get 2 buttons to appear on same row for mobile, but they work fine on desktop. What is the solution?

Pablo · August 2018

Sorry, but even Custom CSS is not working right way.

The CSS classes are overwrithing themselfes.

Make other section only for mobile, in section options, there is option to hide

whole section on other devices

http://prntscr.com/kg34ua

Try to make a full width button or something like this.

Thanks..

RedTail · August 2018

I already defined this section to be hidden on Desktop and Tablet. That is not the solution. Please help me to create 2 buttons on the same row, side by side. Thank you!

Pablo · August 2018

I can't control these buttons, because CSS name of them are very similiar to others.

Please get into your editor and edit wraps with buttons

http://prntscr.com/kgi75w

Name it like this, but make second button named two instead of one.

Thanks.

RedTail · August 2018

Ok,I've done as you instructed and they appear to be on the same row now. But how can I get each button to take up 50% of the space so that the buttons do not have so much space between them?

See mobile view of https://saddlebackeye.com

And thank you for your excellent help!!

RedTail · August 2018

Also can you tell me what to put in the LINK section of the Call Us button so that it will make a call? I currently have this in there, but it doesn't make the call: tel:1-949-644-55434

Pablo · August 2018

Hi,
These buttons have 100% of the width.
Decrease it to 50% and make a margin for one of them to push it.

Then it will work.

Thanks

RedTail · August 2018

Where within the Muffin Builder do I enter these requested changes? I have already defined each Wrp as a 1/2 wrap. See this screenshot: http://stickybrain.com/buttons.jpg

Bryan · August 2018

You can only controll the size of the wrap that the button is inside.

The buttons do not have a size option, the adjust to the amount of text inserted.

There is only an option for each button to be stretched to full width ( filling the wrap width)

thanks

RedTail · August 2018

Can you please be more clear on your explanation above? This explanation is very unclear. Please tell me the steps I must take in order to make 2 buttons to appear side by side with each button taking 50% of the column.

Pablo · August 2018

Hey,

Please send us WordPress dashboard access privately thru the contact form which is on the right side at http://themeforest.net/user/muffingroup#contact and we will check what might be the reason.

Notice!
Please attach a link to this forum discussion.

Thanks

RedTail · August 2018

Sent. Please try to help us as soon as possible and thanks!

Bryan · August 2018

RedTail

Sorry but this will be not possible on mobile devices. All of the wraps and columns will get stretched to 100% so the buttons will always be in separate lines.

The only possiblity we can think of is to insert both buttons in one column and use shortcodes.

I made an example for you:

https://saddlebackeye.com/muffin-test-page/

RedTail · August 2018

BRAVO! THANK YOU!!!

How to build 2 buttons side by side??

Comments