Archived

This topic is now archived and is closed to further replies.

  • 0

Media queries will not implement

Question

Posted · Report post

@media (max-width:930px){
  #contentbox.clone_1 {
    background:white; padding:10px;    
  }
  #contentbox.clone_1 .content {background-image:none}
  #page .nest {background:none}
  .home-left {margin-bottom:24px; width:100%}
  .home-right {clear:left; ; padding-bottom:24px}
}
body {font-family: Raleway, Arial, sans-serif;}
#content .content {
  background:rgba(255,255,255,.8);
  border-radius:12px;
  margin-bottom:60px;
}

 

I find that if a property is specified in the stylesheet the media query will not override it, while if there a property that is not assigned elsewhere the stylesheet (only in the media-query section) then it is properly implemented at the given trigger. What am I doing wrong?

site is http://rescuerod.wpengine.com

Share this post


Link to post
Share on other sites

11 answers to this question

Posted · Report post

Hi,

 

You want to use classes instead of IDs and try adding a PageLines override such as #page to your code.

 

For example:

 

#page .section-contentbox.clone_2 { }

 

 

Do this for all your code.

 

Also, I recommend you review your code as there are a number of errors, just as missing ; or ; being in places where they shouldn't be.

 

Example code:

 

 

@media (max-width:930px){
#page .section-contentbox.clone_1 {
    background:white; padding:10px;    
  }
#page .section-contentbox.clone_2 {
    background:green;
  }
}

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks I will do that.

When you say: 

"Also, I recommend you review your code as there are a number of errors, just as missing ; or ; being in places where they shouldn't be."


 

Do you mean the custom .less I have written as a whole or in the snippet I provided?

Share this post


Link to post
Share on other sites

Posted · Report post

I was referring to the snippet above, I haven't checked your sites code. However, to be on the safe side, I recommend you review all your custom CSS for any errors.

Share this post


Link to post
Share on other sites

Posted · Report post

Okay I did implement as per your recommendation and it has had no effect:

 

@media (max-width:930px){
  #page .section-contentbox.clone_1 {background:white; padding:10px }
  #page .section-contentbox.clone_1 {background-image:none}
  #page .section-contentbox.clone_1 .nest {background:none}
  #page .home-left {margin-bottom:24px; width:100%}
  #page .home-right {clear:left; ; padding-bottom:24px}
}

Share this post


Link to post
Share on other sites

Posted · Report post

Your code is still not valid, you're missing ; in your code, as well as having ; in your code for no reason.

 

 #page .home-right {clear:left; ; padding-bottom:24px}

I have increased the size and highlighted one of your errors in read, please validate your code.

Share this post


Link to post
Share on other sites

Posted · Report post

Sorry I see that.

 

I have corrected it but it is still not implementing.
 

@media (max-width:930px){
  #page .section-contentbox.clone_1 {
    background:white; padding:10px;    
  }
  #page .section-contentbox.clone_1 {background-image:none}
  #page .section-contentbox.clone_1 .nest {background:none}
  #page .home-left {margin-bottom:24px; width:100%}
  #page .home-right {clear:left; padding-bottom:24px}
}

 

 

 

 

 

I cannot see where I am missing a semicolon?

Share this post


Link to post
Share on other sites

Posted · Report post

You still have invalid CSS, the code you have pasted above has the exact same error as I mentioned above. I highlighted that you have a stray semicolon, see below, the stray semicolon is highlighted red. Semicolons are used to seperate the properties from one another, if you have stray one, which you have, it will cause errors in your code.

 

#page .home-right {clear:left; ; <== This needs to be removed padding-bottom:24px}

 

Also, you don't have semicolons at the end of your CSS either, although they aren't needed, you should always have semicolon at the end of your code, as it will invite problems later on.

Share this post


Link to post
Share on other sites

Posted · Report post

#page .home-right {clear:left; padding-bottom:24px}

It had been removed I think you saw an earlier version of the post (I did an edit). This semicolon is not the issue I assure you. If it were the media query would be working and it still is not.

 

Here is the code as it stands:

@media (max-width:930px){
  #page .section-contentbox.clone_1 {
    background:white; padding:10px;    
  };
  #page .section-contentbox.clone_1 {background-image:none};
  #page .section-contentbox.clone_1 .nest {background:none};
  #page .home-left {margin-bottom:24px; width:100%};
  #page .home-right {clear:left; padding-bottom:24px};
}

Share this post


Link to post
Share on other sites

Posted · Report post

I have added in the code you provided but it did not work.

@media (max-width:930px){
  #page .section-contentbox.clone_1 {
    background:white; padding:10px;
  }
  #page .section-contentbox.clone_1 {
    background-image:none;
  }
  #page .section-contentbox.clone_1 .nest {
    background:none;
  }
  #page .home-left {
    margin-bottom:24px; width:100%;
  }
  #page .home-right {
    clear:left; padding-bottom:24px;
  }
}

Share this post


Link to post
Share on other sites

Posted · Report post

When you say its not working, how are you testing it?

 

As the code I gave you an in earlier post, worked on my test site.

 

 

@media (max-width:930px){
#page .section-contentbox.clone_1 {
    background:white; padding:10px;    
  }
#page .section-contentbox.clone_2 {
    background:green;
  }
}

I can't test your code correctly, as I am not sure what .nest is.

 

One other thing, in your custom CSS, if you're already using #page, in your media queries try replacing #page with #site, as your custom CSS may be overriding the code.

Share this post


Link to post
Share on other sites