[mdexcentrevilleParticipant]

Hi.

I would like to have 2 button (One inder the other one) always in the Right bottom of the page.
(http://mdexmontreal.com/mio003/)

I guess I have to use a <div> with a float, etc but i’m not really sure how.
Also, it as to be visible on mobile too.
Can you help me with that ?

Also, can you tell me where I can put all My CSS code exept in the custom CSS ? i’m starting to have a lot and it takes too much space here.

thx a lot 🙂

[DarshanaModerator]

Hi there,

Thanks for writing in! Try following the example below.

First you can add button shortcodes to the pages and assign a unique class for the buttons (class=”my-button-1″).

[x_button class="my-button-1" shape="square" size="mini" float="none" href="http://www.google.com" info="none" info_place="top" info_trigger="hover"]aaaaaaa[/x_button] [x_button class="my-button-2" shape="square" size="mini" float="none" href="http://www.google.com" info="none" info_place="top" info_trigger="hover"]bbbbbbb[/x_button]

Then you can add the following CSS rules into your Customizer, Custom > CSS area using the menu Appearance -> Customize.

.my-button-1 {
    bottom: 0;
    position: absolute;
    right: 100px;
}

.my-button-2 {
    bottom: 0;
    position: absolute;
    right: 0;
}

Hope that helps.

[mdexcentrevilleParticipant]

Hi, Thc for your help

Actually, it’s not working (See http://mdexmontreal.com/mio003/)

Both buttons are in the same place. I guess one should be relative to the absolute one ?

Also, their are in the top. But I guess it’s because the text area is too small.

thx again for your help

[DarshanaModerator]

Hi there,

Could you please try using the following CSS rules instead.

However, I did not understand what you mean by one inside another. Although you can change the button position by changing bottom and right attributes.

.home .my-button-1 {
    bottom: 0;
    position: fixed;
    right: 250px;
}

.home .my-button-2 {
    bottom: 0;
    position: fixed;
    right: 0;
}

Hope that helps.

[mdexcentrevilleParticipant]

Thx.

Yes, it’s working.

Thx a lot for your help.

[Paul RModerator]

You’re welcome!

[Author]

Posts