Stack buttons @1000px

Site URL: https://bbad-wwgc.squarespace.com

I would like to know if anyone has a solution for my button problem (see attachment). I would like to keep them side by side until around @ 1000px. Thanks in advance.

Cheers,

Dennis

What's the password to the site? It's currently locked.

Hi NickScola,

The password is: bbad-wwgc. Thanks for the willingness to have a look.

On 7/12/2021 at 6:12 AM, BluddyBrilliant said:

Hi NickScola,

The password is: bbad-wwgc. Thanks for the willingness to have a look.

 

Add to Design > Custom CSS

/* Buttons overlap */
@media screen and (min-width:768px) and (max-width:1000px) {
div#page-section-60ac83795238d04af9f42e23 .span-9>.row>.span-6 {
    width: 90%;
}
div#page-section-60ac83795238d04af9f42e23 .span-9>.row {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
div#page-section-60ac83795238d04af9f42e23 .span-9 {
    width: 100%;
}
}

Hi Tuanphan,

Thanks again for your generous and awesome help. If I may be so bold I have this problem on more than the home page. If I copy the code and change the page-section-id for that specific page/section nothing changes. Do I need to change more than just the page-section-id to make it work for the other pages.

Cheers,

Dennis

8 hours ago, BluddyBrilliant said:

Hi Tuanphan,

Thanks again for your generous and awesome help. If I may be so bold I have this problem on more than the home page. If I copy the code and change the page-section-id for that specific page/section nothing changes. Do I need to change more than just the page-section-id to make it work for the other pages.

Cheers,

Dennis

Can you share link to all pages where you have problem?

Hi Tuanphan,

Here are the requested links;

https://bbad-wwgc.squarespace.com (you have solved the problem on this page)
https://bbad-wwgc.squarespace.com/about-wwgc
https://bbad-wwgc.squarespace.com/try-it-or-join-us
https://bbad-wwgc.squarespace.com/members-pilots

Thank you!

On 7/15/2021 at 4:13 AM, BluddyBrilliant said:

Hi Tuanphan,

Here are the requested links;

https://bbad-wwgc.squarespace.com (you have solved the problem on this page)
https://bbad-wwgc.squarespace.com/about-wwgc
https://bbad-wwgc.squarespace.com/try-it-or-join-us
https://bbad-wwgc.squarespace.com/members-pilots

 

Thank you!

How about stacked them on tablet? If you want this, I can give the guide to find code.

With buttons side by side, it is very difficult to explain.

That would be great Tuanpan. I don't know if, with my limited knowledge of coding I will manage but we will give it a shot. Otherwise I will just stack them from the start. But I would like the guide please.

Thanks!

9 hours ago, BluddyBrilliant said:

That would be great Tuanpan. I don't know if, with my limited knowledge of coding I will manage but we will give it a shot. Otherwise I will just stack them from the start. But I would like the guide please.

Thanks!

Add to Desisgn > Custom CSS

/* Tablet-stacked buttons */
@media screen and (max-width:991px) and (min-width:768px) {
/* try it or join us */
div#page-section-60b30d395ee915299341240c .span-6 {
    width: 100%;
}
/* member pilots */
div#page-section-60adaa7e9072a05f3e00a7fc .span-6 {
    width: 100%;
}
div#page-section-60adaa7e9072a05f3e00a7fc .span-12 .span-4 {width: 100%;}
/* about wwgc */
div#page-section-60ad886eadcc1749f544b298 .span-6 {
    width: 100%;
}
}

video https://www.loom.com/share/d7a1c376a66a4bc8b0da8fe077b52163

Hi Tuanphan,

That is some next level work! Very impressive you saved the day again.

Cheers,

Dennis