I am using Bootstrap 3.3.4, this page renders fine in a desktop browser:

But when I view on a mobile device, all 4 products are bunched up together. I've tried to debug it but can't see anything obviously wrong. Any ideas?

3 Answers 3


Generally a good option would be to add custom class to your modules and any content you deem necessary to define break points.
Like "col-sm-12 col-md-6 col-lg-4"

(all three of these would go in your custom class together to dictate break points) or however you decide to dictate your break points, this way you are no longer writing extra media queries or adjusting existing ones.

So in this example your element would start mobile full width, then tablet size half width, then large screens 1/3rd width.

See Bootstrap docs for more info


I found the issue, this was related to a min-height style only being assigned to @media only screen and (min-width : 1224px)


Two files do have double slash

<link rel="stylesheet" href="//media/jui/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="//media/jui/css/bootstrap-responsive.css" type="text/css" />

These two may not load properly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.