Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


mikevatech

Question

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.

image.thumb.png.7df33c07bb8ae9f131fab0da326f0997.png

Link to comment
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

6 answers to this question

Recommended Posts

  • 0

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

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;

}

}

Link to comment
  • 0

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

 

image.thumb.png.d9fb947cd6fbd9d06c45a703f257aee7.png

Link to comment
  • 0

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!

 

Link to comment
  • 0

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.

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...