Media Query not executing in css:

[jgk]

Hi!
I'm attempting to get a media query rule to apply to shrink two divs on this page:

http://bit.ly/ULzaNn

In the css between lines 8879-8884 I'm trying to get the divs .food and .drinks to shrink their height so the background image looks better at certain screen widths. I think there's a bug in my code stopping it from executing that media query. Please help. Thanks so much for any advice!

Jay

http://bit.ly/ULzaNn

[Anita]

What size device are you working on? Portrait, landscape....

---

Love coffee, chocolate and my Bella!

[ᴅᴀᴠɪᴅ]

If you mean that you are trying to make the height at 400px between widths 970px and 873px, but it is remaining at height 300px. it is because you have set the height to be 300px later on in your stylesheet so the bit about 400px is being overridden.

Try changing the order of the css to make sure the 400px overrides the 300px for them particular screen sizes.

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[jgk]

Thank you both!

On my computer (google chrome for mac) for screen width set at 874px and above the media query is not executing, even though it should be executing below 970px width.

Inside of inspector the regular rules are applying to the divs above 874px widths even though the media queries should be applying. Is that not happening in your browser?

Thanks!

[Anita]

Put your media queries code in order starting with the largest width. I see some in there out of order that, as David mentioned, could be overriding your code.

---

Love coffee, chocolate and my Bella!

[jgk]

Thanks I figured it out. Thanks so much. Jay

[Anita]

Check this also:

@media screen and (max-height: 1000px) {
  	/*.home-odd.home-section-1 {
  		padding: 80px 0 80px;
  	}
  
  	#text-2 {
  		margin-bottom: 0px;
  		}*/
  /*#text-2 img {
  	  padding-bottom: 0px;
  	  margin-top: 60px;
  	  }*/
}

If you don't need that media query querie size in there - remove it all together. Clean up some of your code (double spacing, add spacing where needed and rearrange the code in size order.

---

Love coffee, chocolate and my Bella!

[Anita]

How'd you fix it?

---

Love coffee, chocolate and my Bella!

[jgk]

Yes, thanks for the suggestions, still have a lot of code to clean up!

I had been trying make the footer stick to the bottom of the page the previous day. Chrome remembered to stay slightly zoomed on that page from the previous day, so it was showing up as broken to me when in fact it wasn't.

[Author]

Posts