• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Media Query not executing in css:

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Media Query not executing in css:

This topic is: not resolved

Tagged: media query

  • This topic has 8 replies, 3 voices, and was last updated 10 years, 10 months ago by jgk.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • August 3, 2014 at 9:18 pm #116922
    jgk
    Member

    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
    August 3, 2014 at 9:30 pm #116924
    AnitaC
    Keymaster

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


    Need help with customization or troubleshooting? Reach out to me.

    August 4, 2014 at 6:05 am #116943
    ᴅᴀᴠɪᴅ
    Member

    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

    August 4, 2014 at 10:00 am #117008
    jgk
    Member

    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!

    August 4, 2014 at 10:28 am #117012
    AnitaC
    Keymaster

    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.


    Need help with customization or troubleshooting? Reach out to me.

    August 4, 2014 at 10:30 am #117015
    jgk
    Member

    Thanks I figured it out. Thanks so much. Jay

    August 4, 2014 at 10:31 am #117016
    AnitaC
    Keymaster

    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.


    Need help with customization or troubleshooting? Reach out to me.

    August 4, 2014 at 10:34 am #117018
    AnitaC
    Keymaster

    How'd you fix it?


    Need help with customization or troubleshooting? Reach out to me.

    August 4, 2014 at 3:53 pm #117058
    jgk
    Member

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble