Bootstrap to wordpress

Question

I am doing this tutorial and have become stuck because I can not get the entire page to be responsive. when i resize the page my jumbotron is responsive but the rest of the page is not. It is like when it gets to a certain size 768px it gets bigger again.

Answer 1 · 2014-09-28T22:16:16Z

September 28, 2014 10:16pm

Paula,

Examine your wrapping divs very carefully. That's often the culprit.

Answer 2 · 2014-09-25T23:03:48Z

September 25, 2014 11:03pm

There are a bunch of things that strike me as odd here.

First, if you look at the top of the HTML page (the generated HTML page - view source in a browser), you'll see this:

    <link rel='stylesheet' id='bs_bootstrap-css'  href='http://studio46designs.com/wp-content/plugins/bootstrap-shortcodes/css/bootstrap.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='bs_shortcodes-css'  href='http://studio46designs.com/wp-content/plugins/bootstrap-shortcodes/css/shortcodes.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dws_bootstrap-css'  href='http://studio46designs.com/wp-content/plugins/dw-shortcodes-bootstrap/assets/css/bootstrap.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='dws_shortcodes-css'  href='http://studio46designs.com/wp-content/plugins/dw-shortcodes-bootstrap/assets/css/shortcodes.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='http://studio46designs.com/wp-content/plugins/easy-bootstrap-shortcodes/styles/bootstrap.min.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-fa-icon-css'  href='http://studio46designs.com/wp-content/plugins/easy-bootstrap-shortcodes/styles/font-awesome.min.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap_css-css'  href='http://studio46designs.com/wp-content/themes/bootstrap-to-wp/css/bootstrap.min.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='main_css-css'  href='http://studio46designs.com/wp-content/themes/bootstrap-to-wp/style.css?ver=4.0' type='text/css' media='all' />
<link rel='stylesheet' id='ebs_dynamic_css-css'  href='http://studio46designs.com/wp-content/plugins/easy-bootstrap-shortcodes/styles/ebs_dynamic_css.php?ver=4.0' type='text/css' media='all' />
<script type='text/javascript' src='http://studio46designs.com/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='http://studio46designs.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://studio46designs.com/wp-content/plugins/bootstrap-shortcodes/js/bootstrap.js?ver=4.0'></script>
<script type='text/javascript' src='http://studio46designs.com/wp-content/plugins/bootstrap-shortcodes/js/init.js?ver=4.0'></script>
<script type='text/javascript' src='http://studio46designs.com/wp-content/plugins/dw-shortcodes-bootstrap/assets/js/bootstrap.js?ver=4.0'></script>
<script type='text/javascript' src='http://studio46designs.com/wp-content/plugins/easy-bootstrap-shortcodes/js/bootstrap.min.js?ver=4.0'></script>

If you look through this, you'll see that bootstrap.css is loaded twice, and bootstrap.min.css is also loaded twice, and if you examine these 4 files, they're all different versions - you should be loading 1, and I would suggest it should be the latest version.

The same is true of the bootstrap.js and bootstrap.min.js files - each are loaded twice.

After that, some combination of the following styles are the issue:

<div class="col-md-4">
          <div class="widget">
                      <h3>Heading 1</h3>
                      <div class="text widget">
                                 <p>

Generally you use the standard version of a file (bootstrap.css/bootstrap.js) while developing so you can read them and see what they're doing, edit etc., and then you replace them with their .min equivalents when you deploy - the .min files just have all the whitespace collapsed out of them - they're impossible to read but they load marginally faster. Here you've got several copies of both the expanded and minimized files loading, and not all the same version.

The column elements size properly (@33% width) until the screen size falls below the threshold (768 px - one of the standard mobile screen widths), after which they look to have a fixed width or minimum width applied instead of a percentage.

You want to look inside the blocks like this:

@media (min-width:768px)

You're looking for a block element in there that's got a fixed or minimum width assigned to it.

When the screen width falls below that 768px threshold, the styles inside those @media (min-width: some screen width in pixels) blocks override all the other styles. These allow you to make fine adjustments to elements for specific screen sizes.

That's not a solution, but it's a place to start and troubleshoot after you've cleaned up a bit.

Answer 3 · 2015-01-05T14:50:04Z

January 5, 2015 2:50pm

Hello,

I had the exact same problem. It seemed to be the DW Shortcode Bootstrap plugin that was causing the problem.

It was as if there was no style for containers below a certain viewport threshold.

The plugin was also overriding my bootstrap.min.css.

The solution I found is to set the .container width to 'auto'. This seems to fix it. Or of course you can also deactivate the plugin.

Hope this helps, I've only just resolved this after two weeks.

Thanks, Jake

Welcome to the Treehouse Community

Looking to learn something new?

Paula Simontacchi

Paula Simontacchi

Bootstrap to wordpress

3 Answers

James Gill

James Gill

Steve Smith

Steve Smith

Jake Bolton

Jake Bolton