Jump to content


Photo
- - - - -

Media queries will not implement


  • Please log in to reply
11 replies to this topic

#1 netage

netage

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 23 April 2013 - 11:08 AM

@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

Please Login or Register to see this Hidden Content



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2013 - 11:24 AM

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:

 

 

Please Login or Register to see this Hidden Content



#3 netage

netage

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 23 April 2013 - 12:11 PM

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?



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2013 - 12:40 PM

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.



#5 netage

netage

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 23 April 2013 - 12:46 PM

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



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 April 2013 - 01:01 PM

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.



#7 netage

netage

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 24 April 2013 - 08:44 AM

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?



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 08:53 AM

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.



#9 netage

netage

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 24 April 2013 - 09:23 AM

#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};
}



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 09:32 AM

OK, you have now added semicolons at the end of the brackets of your code, this too is invalid. I have cleaned the code for you and this should work.

 

 

 



#11 netage

netage

    Super Member

  • Members
  • 114 posts
  • Country: Country Flag

Posted 24 April 2013 - 09:41 AM

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;
  }
}



#12 Danny

Danny

    Is Awesome!

  • Moderators
  • 15848 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 24 April 2013 - 09:49 AM

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.

 

 

Please Login or Register to see this Hidden Content

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.