Horizontally align 3 buttons

Site URL: https://www.modelalliance.org/

Hello, 

I'm trying to horizontally align the 3 buttons in the 3 columns on the homepage.  I've used css to add padding but that only works on one size monitor and not all or mobile.  I'd like them to be in a line and I can't find how to achieve this.  Any guidance is appreciated!

Kelli

Hi. You can remove padding, then we will use min-height for description for all screen size.

Remove padding first then let me know, we can check easier.

Hi!  

So sorry for the delay.  I thought I would get notifications.  I've removed the padding.  

Thank you!!!

Hello!!  

Hope all is well with you.  Wondering if you could send me in the right direction and I can figure the rest out?!  

Regards,

Kelli

Hi. It looks you solved with CSS flex?

@media only screen and (min-width: 767px) {
    #page-section-5f7bbe87af47d17d361b5b13 .sqs-row {
        display:flex;
        max-width: 100% !important
    }

    #page-section-5f7bbe87af47d17d361b5b13 .sqs-col-4 {
        flex: 1
    }

    #page-section-5f7bbe87af47d17d361b5b13 .sqs-block.button-block.sqs-block-button {
        position: absolute;
        width: 29%;
        bottom: 0vw;
        top: 2vm;
    }

    #block-yui_3_17_2_1_1609111147606_196 {
        display: none;
    }
}

Yes!!  I just needed take the time to work it out.  

But I received your email and would love to contribute your efforts.  So grateful.  

I'll do so through your website. 

Thank you so much!

K

I see homepage banner image is not fullsize on mobile. Do you want to resize it?

Hi! I'm trying to solve the same issue on this website:

https://rabbit-bumblebee-dbkd.squarespace.com/

I've tried three ways of doing it:

1. Creating independent blocks, and adding a spacer block below images and text. It works on any desktop, but the blocks get a wrong order on mobile.
2. Creating  independent blocks, adding spacers to adjust things to the same level. It works for mobile and my screen resolution, but it changes when resolution is different.
3. Creating a section with stacked image block with buttons. Again, alignment changes when resolution changes.

I believe you got it working, i tried to adapt your solution to my case, but i can't understand 100% that code. I got the section id from chrome's inspector (not sure if i did it right), but i don't know what this part is talking about:

    #block-yui_3_17_2_1_1609111147606_196 {
        display: none;

Can you give me a hint? Thanks in advance!

By the way, here's what i tried (i injected the code in the page):

@media only screen and (min-width: 767px) {
    #page-section-5ff5d73d956b8231734c353b .sqs-row {
        display:flex;
        max-width: 100% !important
    }

    #page-section-5ff5d73d956b8231734c353b .sqs-col-4 {
        flex: 1
    }

    #page-section-5ff5d73d956b8231734c353b .sqs-block.button-block.sqs-block-button {
        position: absolute;
        width: 29%;
        bottom: 0vw;
        top: 2vm;
    }

    #block-yui_3_17_2_1_1609111147606_196 {
        display: none;
    }
}

4 hours ago, javibg6 said:

Hi! I'm trying to solve the same issue on this website:

https://rabbit-bumblebee-dbkd.squarespace.com/

 

I've tried three ways of doing it:

1. Creating independent blocks, and adding a spacer block below images and text. It works on any desktop, but the blocks get a wrong order on mobile.
2. Creating  independent blocks, adding spacers to adjust things to the same level. It works for mobile and my screen resolution, but it changes when resolution is different.
3. Creating a section with stacked image block with buttons. Again, alignment changes when resolution changes.

 

I believe you got it working, i tried to adapt your solution to my case, but i can't understand 100% that code. I got the section id from chrome's inspector (not sure if i did it right), but i don't know what this part is talking about:

    #block-yui_3_17_2_1_1609111147606_196 {
        display: none;

Can you give me a hint? Thanks in advance!

 

By the way, here's what i tried (i injected the code in the page):

@media only screen and (min-width: 767px) {
    #page-section-5ff5d73d956b8231734c353b .sqs-row {
        display:flex;
        max-width: 100% !important
    }

    #page-section-5ff5d73d956b8231734c353b .sqs-col-4 {
        flex: 1
    }

    #page-section-5ff5d73d956b8231734c353b .sqs-block.button-block.sqs-block-button {
        position: absolute;
        width: 29%;
        bottom: 0vw;
        top: 2vm;
    }

    #block-yui_3_17_2_1_1609111147606_196 {
        display: none;
    }
}

 

What is password?

My bad! Password is: lucas

By the way, we're making it public, so i had to duplicate that page and hide it, so the link to it will be either:

https://rabbit-bumblebee-dbkd.squarespace.com/inicio-copy

or

https://buceoencabodegata.es/inicio-copy

Thanks for your help!

On 5/17/2021 at 2:59 PM, javibg6 said:

My bad! Password is: lucas

By the way, we're making it public, so i had to duplicate that page and hide it, so the link to it will be either:

https://rabbit-bumblebee-dbkd.squarespace.com/inicio-copy

or

https://buceoencabodegata.es/inicio-copy

 

Thanks for your help!

Hi. You want align these 3 buttons?

8 hours ago, tuanphan said:

Hi. You want align these 3 buttons?

On 5/14/2021 at 11:14 AM, javibg6 said:

Hi! I'm trying to solve the same issue on this website:

https://rabbit-bumblebee-dbkd.squarespace.com/

 

I've tried three ways of doing it:

1. Creating independent blocks, and adding a spacer block below images and text. It works on any desktop, but the blocks get a wrong order on mobile.
2. Creating  independent blocks, adding spacers to adjust things to the same level. It works for mobile and my screen resolution, but it changes when resolution is different.
3. Creating a section with stacked image block with buttons. Again, alignment changes when resolution changes.

 

I believe you got it working, i tried to adapt your solution to my case, but i can't understand 100% that code. I got the section id from chrome's inspector (not sure if i did it right), but i don't know what this part is talking about:

    #block-yui_3_17_2_1_1609111147606_196 {
        display: none;

Can you give me a hint? Thanks in advance!

 

By the way, here's what i tried (i injected the code in the page):

@media only screen and (min-width: 767px) {
    #page-section-5ff5d73d956b8231734c353b .sqs-row {
        display:flex;
        max-width: 100% !important
    }

    #page-section-5ff5d73d956b8231734c353b .sqs-col-4 {
        flex: 1
    }

    #page-section-5ff5d73d956b8231734c353b .sqs-block.button-block.sqs-block-button {
        position: absolute;
        width: 29%;
        bottom: 0vw;
        top: 2vm;
    }

    #block-yui_3_17_2_1_1609111147606_196 {
        display: none;
    }
}

 

That's right!

Well, I created 3 sections in that page in which i display the same content, but they have been structured differently (in case one is the best to accomplish this scenario).

In this section you mentioned, i have an added issue, and it is that, i cannot display the information (tittle, text and button) centered. If that can be done, it would be great.

Thanks for your help!

16 hours ago, javibg6 said:

That's right!

Well, I created 3 sections in that page in which i display the same content, but they have been structured differently (in case one is the best to accomplish this scenario).

In this section you mentioned, i have an added issue, and it is that, i cannot display the information (tittle, text and button) centered. If that can be done, it would be great.

Thanks for your help!

Can you change 3 buttons to 3 button blocks? We can align easier with custom code

On 5/19/2021 at 11:44 AM, tuanphan said:

Can you change 3 buttons to 3 button blocks? We can align easier with custom code

 

Hey! Thanks for replying!

The section with the blue background has been created block by block, there are 3 button blocks... is that what you mean? I don't see any 3 buttons block :S

https://rabbit-bumblebee-dbkd.squarespace.com/inicio-copy

(The green section below has the same info, but created using the image block.)

Thanks for your help!

23 hours ago, javibg6 said:

Hey! Thanks for replying!

The section with the blue background has been created block by block, there are 3 button blocks... is that what you mean? I don't see any 3 buttons block :S

https://rabbit-bumblebee-dbkd.squarespace.com/inicio-copy

(The green section below has the same info, but created using the image block.)

 

Thanks for your help!

Add to Design > Custom CSS

/* Mobile-align 3 buttons */
@media screen and (min-width:768px) {
div#page-section-60a227a5f44edf2f9fcd86aa .span-12>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
div#page-section-60a227a5f44edf2f9fcd86aa .span-12>.row .span-4 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
    padding-bottom: 100px;
}
div#page-section-60a227a5f44edf2f9fcd86aa .span-12>.row .span-4 .button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
}
}

On 5/21/2021 at 5:04 PM, tuanphan said:

Add to Design > Custom CSS

/* Mobile-align 3 buttons */
@media screen and (min-width:768px) {
div#page-section-60a227a5f44edf2f9fcd86aa .span-12>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
div#page-section-60a227a5f44edf2f9fcd86aa .span-12>.row .span-4 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
    padding-bottom: 100px;
}
div#page-section-60a227a5f44edf2f9fcd86aa .span-12>.row .span-4 .button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
}
}

Thanks!! it worked!!

Hi I have the same problem, can I also use that code for my client's website? or what part of the code should I tweak to fit mine

On 5/12/2022 at 12:30 AM, kkg said:

Hi I have the same problem, can I also use that code for my client's website? or what part of the code should I tweak to fit mine

Each case needs a different code. Can you share link to page where you have problem? We can give code easier

Hi thank you for responding here's the link:

General 2 — JSQ Creative Agency 

On 5/14/2022 at 4:45 AM, kkg said:

Hi thank you for responding here's the link:

General 2 — JSQ Creative Agency 

Use this code

/* Mobile-align 3 buttons */
@media screen and (min-width:768px) {
div#block-551ff76f71509fc03ded+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
div#block-551ff76f71509fc03ded+.row .span-4 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
    padding-bottom: 50px;
}
div#block-551ff76f71509fc03ded+.row .span-4 .button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
}}

On 5/15/2022 at 3:54 PM, tuanphan said:

Use this code

/* Mobile-align 3 buttons */
@media screen and (min-width:768px) {
div#block-551ff76f71509fc03ded+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
div#block-551ff76f71509fc03ded+.row .span-4 {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    position: relative;
    padding-bottom: 50px;
}
div#block-551ff76f71509fc03ded+.row .span-4 .button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
}}

 

Thank you so much! This code solved it!

I have another query that's not in line with this thread. Can I raise it here?

On 5/17/2022 at 4:33 AM, kkg said:

Thank you so much! This code solved it!

I have another query that's not in line with this thread. Can I raise it here?

 

Yes. You can send. I will check