Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 153
  • Last Modified:

media query not picking up

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
rivkamak
Asked:
rivkamak
  • 3
  • 3
  • 2
3 Solutions
 
Bernard S.CTOCommented:
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
 
Tom BeckCommented:
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
 
rivkamakAuthor Commented:
sorry, you need this link to view that css
https://www.oorahauction.org/shmorgIsrael.asp?heb=1
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
Tom BeckCommented:
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
 
rivkamakAuthor Commented:
This file is specifically to override the main css. so some classes show a few times in different media queries.
0
 
Bernard S.CTOCommented:
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
 
Tom BeckCommented:
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
 
Bernard S.CTOCommented:
B-) Glad we could help! Thx for the grade and points
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now