Longevity theme not mobile friendly?

I’m not sure what you mean by the entire screen isn’t showing? Could you please explain with what isn’t showing?

I just went to your site on my phone and saw your site.

…and yes, this theme is mobile friendly.

I can see the menus but when I go to the page I can only see a portion of the page. For example, if you look under “recognition” and “2016 March Madness Virtual Show results”, I can only see a small portion of the page and there is no slider to see more. Everyone is complaining because they can’t see the youth scores on their phones.

Ah, I think I see what you mean. The “tables” you have in your page are off the side of the screen. By default, tables are not responsive which is why you are seeing this happen.

The bad news is that this theme does not have the responsive table CSS styling. The good news is that I can add that in to an update because I use the Bootstrap framework for the layout. What I will do is add the responsive table code from Bootstrap into this theme so that the table can scroll horizontally.

However, so you do not have to wait for the update, I will post the css code here in a follow up reply so that you can add it to your theme (I will give some instructions).

Give me about 30-60 minutes to get this, test it, then post it.

OK…this will be in the next theme update (which I will do soon). This will at least get you started with a responsive table setup (with a horizontal scroll).

We need to create some custom CSS, so I recommend installing a plugin called “Simple Custom CSS”. This allows the user to create custom CSS code without touching the theme’s own stylesheet file. When you have this plugin active, copy the code below and paste it into the new stylesheet:

th {
    text-align: left;
}
.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}
.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    width: 100%;
    margin-bottom: 15px;
    overflow-y: hidden;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #ddd;
  }
  .table-responsive > .table {
    margin-bottom: 0;
  }
  .table-responsive > .table > thead > tr > th,
  .table-responsive > .table > tbody > tr > th,
  .table-responsive > .table > tfoot > tr > th,
  .table-responsive > .table > thead > tr > td,
  .table-responsive > .table > tbody > tr > td,
  .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
  }

Then, wrap each table with a div container like this:

<div class="table-responsive">
 your table is here
</div>

What this does, is it creates a container for your table to stay intact. It’s the outer div container that gets a scroll bar. I just tested this on my local test site and it works.

I would also recommend not adding pixels based width’s to your tables as this can cause some odd layouts.

Thank you for this help I really appreciate it! However, it doesn’t seem to have worked. Please use your phone to view the front page of my site at https://www.nawdhorse.org and you can see that even the first page is cut off and I did wrap the table as you instructed. Also, I am now getting messages that Google won’t index my site because it is not mobile responsive

You’re very welcome…

First up, Google does not refuse to index sites because they are not mobile responsive; trust me on that.

As for being mobile responsive, I put your site in the Google mobile testing tool and it comes up 100% green (the resulting message is: Awesome! This page is mobile-friendly.)

I loaded your site in my phone and there are no problems…however, your addition of wrapping your tables in that div with the class is done incorrectly. Your site source code shows this:

<p><div class="table-responsive"></p>

When you have your page open with the table(s) in it, make sure you switch to the Text (HTML) tab on the editor, then wrap your table with the code like this:

<div class="table-responsive">
   <table>
    <tr>
    <td>your content here</td>
    </tr>
   </table>
</div>

Man… I’m still not getting it. Any word on when the update is coming?

Here is the page I am struggling with

https://www.northamericanwesterndressage.org/2016-may-trailblazers-virtual-show-results/

Yikes! thanks for the link…based on what I see, there is definitely something broken in there somewhere, like a missing opening or closing tag, or even a missing double quote ” can cause a layout breakage.

The unfortunate problem here is to find out what and where that is, so the best thing to do is to take your page content in the editor, and then carefully go through it to make sure your html code is not missing something. Start with the tables because you have a very complex table layout and structure from what I can see.

As a side note, I realized I said I would do an update, but that was a couple months ago, so my apologies for not getting on that sooner. The good news is that I just now uploaded the update to version 1.4.5 of Longevity, which should be available now.