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?
Joomla Stack Exchange is a question and answer site for Joomla! administrators, users, developers and designers. It only takes a minute to sign up.
Sign up to join this communityI 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?
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)
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.