Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Paula Simontacchi
Paula Simontacchi
1,225 Points

Bootstrap to wordpress

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.

3 Answers


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

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">

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.

Jake Bolton
Jake Bolton
1,956 Points


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