Need simple CSS code to make two text boxes appear as columns in mobile view

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

Hello,
I have a "previous" and "next" text box at the top of my team bio pages that stack when viewed in mobile view. I would like them to appear as two columns (on the same line) like they do in desktop and tablet view. Can someone give me simple CSS code to do this? I only want it for specific pages so I guess it would go into the specific page header, not the Custom CSS under Design. Here is the URL to one of the pages: https://www.blueridgeresearch.com/michael-james. Also, here is a screen shot of the mobile view. You can see the problem I am describing. The word "next" stacks below "previous." Thank you very much for any help you can give me.

Add to Design > Custom CSS

/* Mobile-Michael James-Previous Next */
@media screen and (max-width:640px) {
div#page-60a40ec20f22b814725502e4 .span-2 {
    width: 50% !important;
    float: left !important;
}
}

 

Thank you so much Tuanphan. I appreciate your help. The code you gave me worked for that specific page. Great! I have additional team member pages. I took your code and changed the name and div#page number for each one. Only the one you gave me works. The others do not work. Obviously, I am either using the wrong div#page number or something else is wrong. I identified where you got the number for the first page and used that as a guide to get the numbers for the other pages. Can you please look at my code and tell me what I'm doing wrong? The URL to the page you did is - https://michael-james-4flv.squarespace.com/config/pages.

Here is the code I made using yours as a guide:

/* Mobile-Michael James-Previous Next */

@media screen and (max-width:640px) {

div#page-60a40ec20f22b814725502e4 .span-2 {

    width: 50% !important;

    float: left !important;

}

}

/* Mobile-Josh Mellon-Previous Next */

@media screen and (max-width:640px) {

div#page-60c3b8448cc84246d83a97c8 .span-2 {

    width: 50% !important;

    float: left !important;

}

}

/* Mobile-Alex Salton-Previous Next */

@media screen and (max-width:640px) {

div#page-60c9116f3ed8ad122ceaa45c .span-2 {

    width: 50% !important;

    float: left !important;

}

}

/* Mobile-Matt Calton-Previous Next */

@media screen and (max-width:640px) {

div#page-60c91354f97c884a95e4ac06 .span-2 {

    width: 50% !important;

    float: left !important;

}

}

/* Mobile-Ben Manning-Previous Next */

@media screen and (max-width:640px) {

div#page-60c914d2eebe08096e929d71 .span-2 {

    width: 50% !important;

    float: left !important;

}

}

/* Mobile-Shane Limpany-Previous Next */

@media screen and (max-width:640px) {

div#page-60c9363db4128246fba23851 .span-2 {

    width: 50% !important;

    float: left !important;

}

}

/* Mobile-Shane Limpany-Previous Next */

@media screen and (max-width:640px) {

div#page-60c9363db4128246fba23851 .span-2 {

    width: 50% !important;

    float: left !important;

}

}

/* Mobile-Jonathan Gills-Previous Next */

@media screen and (max-width:640px) {

div#page-60c938d345d4ac6a9c48f52c .span-2 {

    width: 50% !important;

    float: left !important;

}

}

/* Mobile-Blaine Harker-Previous Next */

@media screen and (max-width:640px) {

div#page-60c93aa854473e6b91af3f18 .span-2 {

    width: 50% !important;

    float: left !important;

}

}

Hi. /config is admin url. See how to find page url.

Thank you for your response, Tuanphan. I'm sorry, I don't quite understand it. The link you gave me goes to a page that shows how to find the page URL. I don't see the page URL anywhere in the code you gave me. I see only the page ID#. Please see below, your code on the left and the inspect code on the right. I highlighted the page ID# that you used in your code. I found that same number for all the other bio pages. But, only the one you gave me works. I don't understand how to duplicate your code for each bio page. I thought I just changed the page id #. Can you please explain exactly what I change to make it work for each bio page? For example, how would the code read for this page? - https://www.blueridgeresearch.com/josh-mellon

 

Tuanphan, I think I figured it out. It seems the two columns required a spacer in between them, though I'm not sure why that would matter. I added a spacer between "previous" and "next" and then the code worked with the page id changed for each page. Don't understand why that worked, but it did. Thank you very much for your help with this. Wish I had your brain!

 

I think you need to replicate previous/next with Code Block, Thus, you only need a single code, copy paste, adjust the url, and do not need to do anything else.

Step 1. Edit each page >> add a Code BLock >> Paste this code

<div class="tprev-next">
<a href="https://google.com">◄ previous</a>
<a href="https://facebook.com">next ►</a>
</div>

When you've done this, let me know. We will give the CSS code to make it side by side & adjust styling.