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?
asked Jul 1, 2015 at 22:14
Add a comment
|
3 Answers
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.
I found the issue, this was related to a min-height style only being assigned to @media only screen and (min-width : 1224px)
answered Jul 1, 2015 at 22:25
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.
