Solved

media query not picking up

Posted on 2015-01-29
8
140 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
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

828 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