• 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

Regarding Mobile size media query

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 › Regarding Mobile size media query

This topic is: resolved

Tagged: media query, Metro Pro

  • This topic has 4 replies, 2 voices, and was last updated 8 years, 3 months ago by Jinka Varalakshmi.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 3, 2015 at 11:18 pm #154799
    Jinka Varalakshmi
    Member

    Hello, My blog is whatvwant.com. I am using po.st plugin to display social sharing buttons. I wanted to disable this plugin in mobile. I have asked plugin developer for help. His answer is,

    If you are using media queries then you simply need to add this style on your mobile size media query:

    If you are using vertical:
    .pw-float-left { display: none; }

    If you are using horizontal:
    .pw-layout-horizontal { display: none; }

    I using metro pro child theme. Where should I add this code?


    My hobby is to learn about new technologies and writing technical tips in my blog whatvwant.com
    Google+ | Facebook | Twitter

    http://www.whatvwant.com
    June 4, 2015 at 12:17 am #154802
    Erik D. Slater
    Member

    Based on how your site currently stands ...

    If mobile includes tablets then you will want to place those two lines of CSS code inside the @media only screen and (max-width: 767px) section. Otherwise, slip them into the @media only screen and (max-width: 480px) section.


    Erik D. Slater: Digital Platform Consultant • LinkedIn
    June 4, 2015 at 1:40 am #154819
    Jinka Varalakshmi
    Member

    I have placed like this. It is not working. Let me know is it wrong?


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

    .content .entry-meta .entry-comments-link {
    display: block;
    float: none;
    margin: 10px 0;

    }
    .pw-layout-horizontal { display: none; }
    }


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

    .header-image .site-title a {
    background-size: contain !important;
    }

    .site-title {
    font-size: 36px;
    }
    .pw-layout-horizontal { display: none; }
    }


    My hobby is to learn about new technologies and writing technical tips in my blog whatvwant.com
    Google+ | Facebook | Twitter

    June 4, 2015 at 1:54 am #154821
    Erik D. Slater
    Member

    Firstly ... you only need to add it to the 480px media query ... and it will take effect for all widths below 480px, i.e. you don't need to add it to the 320px query as well. A similar case applies if you decide to include tablets, i.e. add to 767px and not 480px.

    Secondly ... where did you add this? I'm not seeing it in your style.css file.


    Erik D. Slater: Digital Platform Consultant • LinkedIn
    June 5, 2015 at 3:42 am #154964
    Jinka Varalakshmi
    Member

    Now i have placed like this


    @media
    only screen and (max-width: 1023px) {
    .pw-layout-horizontal { display: none; }
    .footer-widgets,
    .site-container,
    .wrap {
    max-width: 772px;
    }

    It is working now. Thanks for your cooperation.


    My hobby is to learn about new technologies and writing technical tips in my blog whatvwant.com
    Google+ | Facebook | Twitter

  • 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