Solved

media query not picking up

Posted on 2015-01-29
8
138 Views
Last Modified: 2015-02-04
on my site here:https://www.oorahauction.org/shmorgIsrael.asp

I have a css file that I am using to override an original css.
the second file is called main_heb.css

this media query is not getting picked up
@media (min-width: 768px){

  .container {
	margin-right:170px;
	margin-left:0px;
  }
   .container-fluid{
  margin-right: 170px;
  margin-left:0;
  }
}

Open in new window

All the rest are.
What am I doing wrong on this one?
0
Comment
Question by:rivkamak
  • 3
  • 3
  • 2
8 Comments
 
LVL 29

Assisted Solution

by:fibo
fibo earned 334 total points
ID: 40578085
You might look at the result of http://jigsaw.w3.org/css-validator/validator?profile=css3&warning=0&uri=https%3A%2F%2Fwww.oorahauction.org%2FshmorgIsrael.asp which generates lots of error messages. browsing thru them might pinpoint some errors.
Your css files are not totally clear with media queries in several places, and with different "breaking points"
You might consider having a main css with additional media queries regrouped at the end or in a separate file... if that is possible
0
 
LVL 38

Assisted Solution

by:Tom Beck
Tom Beck earned 166 total points
ID: 40578253
I don't see a reference to main_heb.css anywhere on the page. I see b_main.css and prizes14.css aside from bootstrap, font-awesome and two google stylesheets.

There's also no element with class="container".

For class="container-fluid", margins are set on line 789 of b_main.css under the definition for #nopad.
0
 

Author Comment

by:rivkamak
ID: 40578284
sorry, you need this link to view that css
https://www.oorahauction.org/shmorgIsrael.asp?heb=1
0
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
LVL 38

Expert Comment

by:Tom Beck
ID: 40578991
My head is spinning just trying to wade through that mess. For example, for container-fluid, margin-left:170px is defined 4 different times for various screen widths when only one definition could cover them all.  

There's also a script error in the console on the link you posted last.

I cannot pinpoint a reason why the main_heb.css rule for container-fluid does not apply when the browser is wider than 767 pixels. Perhaps it's a specificity issue. Try using the id instead of the class name for the container.

#nopad {
  margin-right: 170px;
  margin-left:0;
  }
0
 

Author Comment

by:rivkamak
ID: 40579898
This file is specifically to override the main css. so some classes show a few times in different media queries.
0
 
LVL 29

Accepted Solution

by:
fibo earned 334 total points
ID: 40579958
Riv,

It seems that our common reaction is to suggest that you consider some reordering and clarification of your css.
It is difficult to us to pinpoints where the problem occurs, because all is tangled.
And it is difficult for you too.

To sort the issue in the present file, I would probably use a trial and error approach

1 - Create debug.css and load it after you other css files:
@media (min-width: 768px){

  .container {
	margin-right:170px;
	margin-left:0;
        border-right: 2px red solid;
  }
   .container-fluid{
  margin-right: 170px;
  margin-left:0;
  border-right: 2px blue solid;
  }
}

Open in new window

Do you see the correct borders?
- If yes, the the media-query works here, and you "just" have to find where previous media-queries fail (maybe you placed a competing media query which cancels the expected ones)
- if no, then you should explore "why". what is the current width found by css?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40579975
so some classes show a few times in different media queries.
I get that. But in b_main.css you have for example:

 @media (min-width: 768px) {
    .container-fluid {
        margin-left: 170px
    }
}

It's pointless to have these definitions cluttering up the stylesheet:

@media (min-width: 1200px) {
    .container-fluid {
        margin-left: 170px
    }
}
@media (min-width: 992px) {
    .container-fluid {
        margin-left: 170px
    }
}

Every size greater than 767 pixels is already covered. Makes it tough to troubleshoot.

Then you have something like this overriding every container-fluid class definition for widths under 768 pixels:

@media (max-width: 767px) {
    .container-fluid {
        margin-left: something else
    }
    #nopad { /*this overrides all class definitions for the same element*/
        margin-left: auto
    }
}

It's a mess. That's why I asked if using #nopad in the main_heb.css file instead of .container-fluid might solve the problem. But as I said, I couldn't find the actual reason for the override not working. As @fibo pointed out, there are many validation errors on the page AND a script error. You have to get the important things cleared up before you troubleshoot the minor details.
0
 
LVL 29

Expert Comment

by:fibo
ID: 40589413
B-) Glad we could help! Thx for the grade and points
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question