Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

media query not picking up

Posted on 2015-01-29
8
Medium Priority
?
148 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 1336 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 664 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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 1336 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
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 custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

824 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