Link to home
Start Free TrialLog in
Avatar of jblayney
jblayneyFlag for Canada

asked on

media queries min-width in bootstrap not being read properly

Hello,

https://www.think-dev.ca
user: think
pass: insure

I have a media query for iPhone 6 portrait which has a width of 667px, the css i am using is  line 771 (inspect element of the' we're open sign' graphic  to see the whole css)

.weareopen{
      margin-right: 30px;
      display:block;}

 Now usually i would place this media query in here  @media only screen and (min-width : 667px) {  

but for some reason this doesn't work, i need to back it up 17 pixels to

 @media only screen and (min-width : 650px) {

in order to make the css work, this has been happening to other elements in this CSS file instead of putting the CSS media query on the actual width I want, I need to go back at least 17 pixels. It seems like min-width is not accurate. Any ideas?
Avatar of lenamtl
lenamtl
Flag of Canada image

Hi,

I have checked the code, one of the problem is that you don't follow Bootstrap grid system correctly for column calculation.

For example under the section Types of Insurance
you have
col-xs-4 col-md-2 

Open in new window

 3 times
so for col-xs total equal 12 which is good, but col-md total equal 6 and it should equal 12.

So first, before changing the media queries I would  fix all row that have not total 12 on each column class.
Then that will be easier to adjust the media queries if needed
Avatar of jblayney

ASKER

HI there, thanks for responding, this is a page in progress and I am converting it from one design to another and working top down, i may not have gotten to that part yet..

What you have mentioned is not related to my problem though, these media queries in the CSS are based purely on browser width and unconnected to the bootstrap columns, and it is not reading the browser width  correctly
Yes it is related as these column value are use with the media query too check Bootstrap CSS unminified then you will see all media queries css
When you will fix these Bootstrap column the problem should be gone or at least you will have correct Boostrap column then you will be able to adjust your custom css.

It is important that Boostrap code is use correctly to have a solid base.

It won't render correctly until you fixed them.
I'm sorry, again I appreciate your help but you are wrong in this situation, as a matter of fact all the columns are correct now and i still have the problem. So the problem is something else
And just to clarify, it is a perfectly acceptable practice to have col-md-2 only add up to 6, I can do this is I want the elements to only go half way across the row. That is not broken, that is a design choice. As long as I am aware of what i'm doing and make sure I clear all below if I need another row of columns below it.  You just need to make sure you don't go over 12...  

The CSS media queries are unrelated to Bootstrap, they are controlled by your browser width and the settings you give them. Think about it, if my media query says

@media only screen and (min-width : 667px) {  

it means "if browser width is at least 667 pixels wide..  It is not connected to bootstrap in any way shape or form, it is simply a true or false condition based on the browser width...  If I am using the bootstrap classes, then it is 100% controlled by bootstrap..
Hi,

Bootstrap required 12 columns, the only case I know that it's not required is when nesting http://getbootstrap.com/css/#grid-nesting

You can play with offset class to have more flexibility http://getbootstrap.com/css/#grid-offsetting

To show or hide content based on the media queries you can use show hide class
http://getbootstrap.com/css/#helper-classes-show-hide
So if I was you. I would use it for your we are open widget.

I have checked your code again and the column count are wrong, each row must equal 12
<div class="row">

Open in new window


I saw a row that have a total of 52 ...

All these will affect the overall website display...
Good luck
I am going to ask that this thread is closed.

To make sure that you don't have a point, i removed the links  to the bootstrap CSS and I still have the issue, so i know 100% it is not bootstrap.

I do use some advanced techniques which you may not understand without a lengthly explanation. The basics of them are that this bootstrap build has extra-small (xs) as 768 px which was the default when I first started this.  My design requires me to have iPhone 5 portrait (320) iPhone, 6 portrait (375px) and so on to have their own looks, columns counts, etc.. So i use advanced CSS techniques and logic with media queries on top of bootstrap to make this happen
@jblayney How are you testing that media query? The difference you're seeing might be the width of a scrollbar, if you're using some kind of emulator.

@lenamtl  Why must columns add up to 12? Certainly that's the most common way to use 12 column grid systems, but how is it a requirement?
Hi David,

I am testing on safari (responsive design mode)  emulator

I just tested on my iPhone, my phone is displaying it properly :)  I have used the safari emulator for so long it never even occurred to me that it could be wrong in this capacity ( i know they sometimes don't always look the exactly same, but the media queries were correct )

Can you recommend a better emulator, I don't have all the devices to test on?
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
such a simple solution, i am kind of embarrassed..
Don't be. I miss things too sometimes.  And front-end web development is more complex than it used to be.

I may well have run into this particular issue myself some time ago. This is an easy thing to not realize immediately.