• 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 queries not detected

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 queries not detected

This topic is: resolved

Tagged: media queries

  • This topic has 4 replies, 2 voices, and was last updated 6 years, 6 months ago by tiki16.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • September 9, 2016 at 7:37 am #192868
    tiki16
    Member

    Hi I have been making some changes to media queries. I am changing some of the breakpoints but when I resize chrome and can see the width in pixels, the media queries don't activate for that resolution. When check in chrome dev tools I can see that the original styles are still in place. Is chrome dev tools accurate displaying the resolution dimensions in the top right? thanks
    Here is my css:

    @media
    only screen and (max-width: 1300px) {

    .site-inner .content {
    width:60%;
    }
    }

    @media
    only screen and (max-width: 920px) {
    .site-header .genesis-nav-menu {
    margin-right: 20%;
    }

    }

    http://staging.pixelstew.net/wickedtenants/about/
    September 9, 2016 at 7:45 am #192873
    Brad Dalton
    Participant

    Where are you placing the CSS in your file? Before or after the default CSS for Media Queries?

    Also, did you clear all types of caching.


    Tutorials for StudioPress Themes.

    September 9, 2016 at 8:01 am #192875
    tiki16
    Member

    I have it inline with the other media queries. I think it may be that my css notation is incorrect.

    September 9, 2016 at 12:07 pm #192908
    tiki16
    Member

    I changed the background color to blue when content width is at 1300px w. I can see this happen but when using google dev tool it shows the browser width as 1170px wide, so something is amiss?

    September 9, 2016 at 1:59 pm #192913
    tiki16
    Member

    I tested it with Firefox dev tools and used ruler. It appears to be more accurate with measuring page width than chrome. Where as, Chrome showed it as 1300pw wide FF ruler was more accurate at 1470px wide so I adjusted my media queries accordingly. What a headache.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 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

© 2023 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