Side by side buttons on mobile one a specific page

Site URL: https://www.gerafoundation.com

Hi, I'd like to align two buttons side by side in the mobile view of my website. Ive seen my question asked several times before on here where a CSS code is the recommended solution. I'd like to apply this affect to specific pages on my website and not the entire website. I cant figure out which part of the CSS code targets the specific page. Can someone help me with this? I'd like to have the "prev" and "next" buttons side by side, however they currently become above and below only in the mobile version, example https://www.gerafoundation.com/james

Add to Design > Custom CSS

/* James page mobile buttons side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632108358222_2371+.row .span-6 {
    width: 50% !important;
    float: left !important;
}
}

6 hours ago, tuanphan said:

/* James page mobile buttons side by side */

The code worked a charm. Could you explain the logic in the code? Ive tried replicating your solution for another page: https://www.gerafoundation.com/ross in where I edited the following line

6 hours ago, tuanphan said:

yui_3_17_2_1_1632108358222_2371

changing it to:

yui_3_17_2_1_1632106842580_2916

But no good.

It is text block id above buttons. Both pages have different structure.

/* Ross mobile page buttons side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1632106842580_2916~div {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1632109353161_2748 {
    padding-top: 0 !important;
}
}

If you need to add 2 buttons on multiple pages, we can conver it to Code Block, then you just copy-paste, no need to edit any code. What do you think?

On 9/24/2021 at 11:37 AM, tuanphan said:

If you need to add 2 buttons on multiple pages, we can conver it to Code Block, then you just copy-paste, no need to edit any code. What do you think?

I need to add it to three pages, and only those three:

https://www.gerafoundation.com/gordon

https://www.gerafoundation.com/james

https://www.gerafoundation.com/ross

What would you suggest is best? Id like to understand the basics of CCS / Code Block to do it myself so that I dont have to keep bothering you :] I really appreciate your help and the time you've given to respond

On 9/25/2021 at 2:28 PM, RossBurns said:

I need to add it to three pages, and only those three:

https://www.gerafoundation.com/gordon

https://www.gerafoundation.com/james

https://www.gerafoundation.com/ross

What would you suggest is best? Id like to understand the basics of CCS / Code Block to do it myself so that I dont have to keep bothering you :] I really appreciate your help and the time you've given to respond

Add to Design > Custom CSS

@media screen and (max-width:767px) {
/* Gordon */
div#page-section-61480413649ec94660fd29c3 .span-6 {
    width: 50% !important;
    float: left !important;
}
/* James - ross */
/* It looks like you solved */
}

@tuanphan You met all my needs, thank you sincerely for your time