CSS for page-specific media queries

  • Unknown's avatar
    donoughsugrue · Member ·

    I am looking to add media queries to my WordPress site, well for one specific page on the site. I was wondering can this be done? Is there any possible way to add the media queries through the theme options editor panel – I tried adding this code to the editor panel, then applying the ‘sizer’ class to the targeted images on the page, but the changes don’t seem to be taking effect.

    @media only screen and (max-width:700px) {
.sizer.img {
width: 200px;
}
}

@media only screen and (max-width:1500px) {
.sizer.img {
width: 800px;
}
}
  • Unknown's avatar
    hallluke · Member ·

    The WordPress.com site linked to your username is empty and you didn’t provide a link for us to visit. If you have a WordPress.com site can you provide the URL to the page on which you want the changes to happen.

    If you’re not hosted here on WordPress.com then the WordPress.org forum will be a better place to ask. And for future reference here’s a list of the differences.

  • Unknown's avatar
    designsimply · Member ·

    I am looking to add media queries to my WordPress site, well for one specific page on the site. I was wondering can this be done?

    Most often, you can use body classes to target specific pages. For example, the home page should have a “home” class and that means you can target just that page by putting “.home” in front of your CSS selectors.

    Is there any possible way to add the media queries through the theme options editor panel

    Yep, you should be able to do that.

    I tried adding this code to the editor panel, then applying the ‘sizer’ class to the targeted images on the page, but the changes don’t seem to be taking effect.

    It sounds like media queries are actually not the right thing for your use case. A media query lets you customize based on the size of the screen a visitor is using to view your website. You would want to use media queries to target mobile devices tablets. If you used a media query and then viewed the site in your browser, it makes sense that you would’t be able to see the screen because your example limits the change to screens that are 700px wide or smaller. If you want to learn more about media queries, got to http://en.support.wordpress.com/custom-design/custom-css-media-queries/

    Also though, it’s not a good idea to stretch images using CSS because it can cause images to look pixelated if you stretch them too much.

    For future questions, asking at http://wordpress.org/support/ as hallluke suggested is the right route for you because it doesn’t appear your site is setup here at WordPress.com. If you are looking for help with a theme in particular, then it’s a good idea to try asking the theme author first to see if they are available to help. When you do that, definitely try to include a link to the page you are working on because that’s really helpful.

  • The topic ‘CSS for page-specific media queries’ is closed to new replies.