Solved

media query not picking up

Posted on 2015-01-29
8
137 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
Comment Utility
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
Comment Utility
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
Comment Utility
sorry, you need this link to view that css
https://www.oorahauction.org/shmorgIsrael.asp?heb=1
0
 
LVL 38

Expert Comment

by:Tom Beck
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:rivkamak
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
B-) Glad we could help! Thx for the grade and points
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

772 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now