Bootstrap’s “table-responsive” and “pull-right” do not mix very well

I love working with Bootstrap!  It is a “must-have” in my ever growing toolbox of web development goodies. Bootstrap has many helper classes and other components that assist in speeding up the development process.  One of those that has come in pretty handy over the years is class="pull-right". When adding quick floats (pull-left for pull-right) and responsive tables, these things don’t always mix well.  I have found a solution to the table-responsive not actually being responsive!

What is “pull-right”?

Bootstrap has a helper class of class="pull-right".  Pretty much, it is a quick float right. Other than the more obvious things on a site you may use a float right for, this class is also helpful for sidebars.

Example: You are developing a site with a left sidebar, but when it gets down to mobile, you want the sidebar to fall to the bottom of the page, rather than the top (which is where it would naturally go if you put that code first in the theme file, or in the HTML file).  One possible solution for this is to put the code after the content area.  You would put a class="pull-right" on the content, and a class="pull-left" on the sidebar. This switches the order of the columns on desktop, and drops the sidebar below the content on mobile devices. Pretty cool huh?

Now, the problem with this is that if you need to add tables into the content (only for actual table content, no tables for layouts please!), the responsive table class (class="table-responsive" or the table in general freaks out. So, when viewing on a mobile device, when the table should get scrollbars, it just stays fixed. To fix this, I found that adding a mobile query to remove the float fixed the table, and it responded as expected. The code I used was:

I put this here in case anyone else comes across the same issue. Hopefully someone will find this useful in their coding adventures.

Happy Coding!

Google’s Mobilegeddon – Coming Soon! Is Your Site Ready?

What is Mobilegeddon?  It is what many people are calling Google’s most recent update!

As of April 21st, 2015, Google will be updating it’s algorithm to include mobile-readiness as a ranking factor in search results.

What does Mobilegeddon mean for your site?

As described on Google’s Blog, this update will cover 2 primary areas.

  1. More mobile friendly sites in search results.
  2. More relevant app content in search results.

Therefore, if you have a responsive site, great! You are in the clear and as Google describes, you will more than likely see an increase in your search engine rankings as a result in this algorithm change.  If you do not have a responsive site, then you will most likely experience a hit to your rankings.  Since those sites that are not responsive will be pushed further down in the rankings to make room for the sites that are responsive, mobile-friendly sites.

Is your Site at Risk?

There are multiple tools that you can use to find out if your site is responsive and ready.  Here we have provided a few options.

  • Resize your browser window
    • While you have your website open in a web browser (such as Chrome, FireFox, or Internet Explorer).  If the site elements move and resize with the browser, then your site is responsive.  You may still want to run some other tests (because this method is not failproof) because you may have other issues with different mobile devices.  This method only means that the developer has at least laid the groundwork for your site to be responsive. When you resize your browser, if your site looks just like it does full size on the desktop, then it is NOT responsive.  The elements should change and move to accomidate the screen size.
  • Google Chrome’s Developer Tools
    • Right click on your website and choose “Inspect Element”.  This is Google Chrome’s developer tools.  In this area, you can “emulate” several different mobile devices.  This is a good indicator on whether or not your site is responsive.  Keep in mind, once you choose a device, you may need to refresh (ctrl+shift+r) so that Chrome can emulate that device.
  • Googles Mobile-Friendly Test
    • Google has been kind enough to provide a mobile-friendly test. You can find it here.  Just enter the site URL you want to test, and Google will provide you with a report and feedback on things to do to improve on your mobile-readiness.
  • Google’s Webmaster Tools
    • If you have set up Googles Webmaster Tools for your site then as Google’s Blog states, you can “get a full list of mobile usability issues across your site using the Mobile Usability Report.”

Breathe, Don’t Worry

Even if you do not have a responsive site right now and cannot make the April 21st deadline, don’t’ worry.  It is not the end of the world.  Take yourself a deep breath and start planning.  You can still fix your site for the changes regardless of the deadline.  Just make sure you do it as soon as you can.  Once your site is back up and running with a newly responsive framework, then your rankings should start to even out again.

 

DIVs VS Sections

Is it better to achieve a full width color grid layout with DIVs or Sections?  That has been the question of the day today.  This morning I was going over this topic with a fellow developer.  We know that his can be achieved either way  but which way is better and makes more sense?

I would love to know other developers thoughts on this topic.  I have looked up many examples and they are pretty mixed to achieve this with either method.

Just so I’m clear…this is what I mean….

The <div> Way

<div class=”full-width-color”><!–this would be the color to extend the full width of the browser–>

<section class=”partial-width-content”>Some content and styles</section><!–this would be the wrapper for the wrapper for the main content area, the container so to speek–>

</div>

The <section> Way

<section><!–this would be the color to extend the full width of the browser–>

<div>Some content and styles</div><!–this would be the wrapper for the wrapper for the main content area, the container so to speek–>

</section>

The Possible Solution?

The more I think about it, the more I “chase my tail” on the subject.  I don’t really believe there is a right or wrong way to achieve this.  I keep coming back to that old saying “there is always more than one way to skin a cat”.  I think both ways are viable and achieve the same desired affect.

The <section> way seems more logical to me the more I think about it though.  The element <section> was created to organize the different sections of the development process.  Therefore using it as a layout to divide the areas or “rows” with colors just makes sense.

Please share if you have any thoughts!  Thanks for your time! 😀