Search code examples
csswordpressmedia-queriescustom-wordpress-pages

Is it possible to target only my home page with a media query?

Is it possible to use a media query but limit it so that it only affects my homepage?

I am in the process of setting up a woo-commerce store and all of the site looks OK apart from the homepage when viewed on a mobile device. I've been looking for a solution for days with no success.

If so could you please tell me what code i start off with. Any assistance greatly appreciated, I am way out of my depth with this. Paula

Solution

  • You must use both the media query and a way to target the CSS on home.

    You need a body class, such as home within a media query for the size of the screen you want to target, i.e.:

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

    .home .my-selector {
        font-size: 14px;
    }

}

    WordPres themes usually add a body class for the page ID, or the slug of the page, i.e. home or front-page. Look in the page source inside the <body> tag.

    It's best to learn how to use the developer tools in Firefox (or Firebug) or Chrome or Safari or IE to see what's loading on your site and how to work with and change the CSS and HTML in real time, and then be able to add those changes to your style.css in the theme.