Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Simon Merrick
Simon Merrick
18,305 Points
Posted by Simon Merrick
Simon Merrick
18,305 Points

Wordpress CSS not showing up for mobile devices

I have a responsive, mobile friendly php site that I am trying to integrate with wordpress, however the css is not displayed when viewing on on mobile devices.

All of my css and media queries are pasted in style.css

Rich Bagley
Rich Bagley
25,869 Points

Hi Simon,

Can you post the HTML you have used to include the style.css as well as the CSS please?

Thanks

-Rich

6 Answers

Simon Merrick
Simon Merrick
18,305 Points
Simon Merrick
Simon Merrick
18,305 Points

The following is header.php so far

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">h
        <title><?php wp_title();?></title>
        <?php wp_head();?>
    </head>
    <body>
        <header>
            <h1><a href="<?php bloginfo('url');?>"></a><?php bloginfo('name');?></h1>
            <nav>
                <ul>
                    <li><a href="#">Bug Polo</a></li>
                    <li><a href="#">River Bugging</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>

        </header>

The Following is style.css

/**************************************************
Headings
**************************************************/
h1 { font-size: 3em;}
h2 { font-size: 2.5em;}
h3 { font-size: 2em;}
h4 { font-size: 1.5em;}
h5 { font-size: 1.0em;}
h6 { font-size: 0.75em;}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

/* Colors
Header: #3399FF
Nav: #1975FF
*/

/**************************************************
Header
**************************************************/

header {
    display: block;
    width: 100%;
    color: white;
    background-color: #3399FF;
}

header h1 {
    font-family: "rancho";
    padding: 20px;
}
/**************************************************
Nav
**************************************************/
header {
    display: block;
    width: 100%;
    color: white;
    font-family: "rancho";
    background-color: #3399FF;
}

header h1 {
    padding: 20px;
}
/**************************************************
Nav
**************************************************/

nav{
    width: 100%;
    text-align: center;
    background-color: #1975FF;
}

nav ul {
    display: block;
    margin: 0 auto;
    width: 100%;
}

nav ul li {
    display: inline-block;
    margin: 5px;
}

nav ul li a {
    text-decoration: none;
    display: block;
    padding: 5px;
    border-radius: 0.5em;
    text-decoration: none;
    color: white;
}

nav ul li a:hover {
    color: #1975FF;
    background-color: white;
}
Rich Bagley
Rich Bagley
25,869 Points

Just edited the above code so it's a little easier to read. If you need to do this in future this is how :)

-Rich

Simon Merrick
Simon Merrick
18,305 Points
Simon Merrick
Simon Merrick
18,305 Points

The css is included in functions.php

<?php
add_theme_support('menus');

function bugsportsnz_theme_styles(){
    wp_enqueue_style('reset_css', get_template_directory_uri() . '/css/reset.css');
    wp_enqueue_style('fonts_css', 'http://fonts.googleapis.com/css?family=Merriweather:400,300,700|Rancho');
    wp_enqueue_style('main_css', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'bugsportsnz_theme_styles');
?>

It displays fine in a browser on my mac by not my iphone

Rich Bagley
Rich Bagley
25,869 Points

Hi Simon,

Just updated my answer in the edit below if you can take a look please.

As a side note, you mentioned you'd included your media queries but I can't see any in the CSS example given. Is there more CSS?

-Rich

Rich Bagley
Rich Bagley
25,869 Points
Rich Bagley
Rich Bagley
25,869 Points

Hi Simon,

You will need to enqueue the style sheet so that style.css is linked.

If you're using a child theme you'll need to do this for both the parent theme and the child theme style sheets.

See the Adding CSS to a theme via the functions.php file video for more info.

EDIT: Posted the above at the same time additional information was given.

It might be nothing but you have an additional h at the end of the following line:

<meta name="viewport" content="width=device-width, initial-scale=1.0">h

Can you try removing this please in case it's affecting it?

-Rich

Simon Merrick
Simon Merrick
18,305 Points
Simon Merrick
Simon Merrick
18,305 Points

I removed the h which made no difference. The css is being displayed fine on computers but not on mobile. Ithink the issue is that worpress is looking for s specific style sheet for mobile devices which doesnt yet exist. So far my theme is optimized for small devices and (is going to) us the following media query break points for larger screen sizes:

@media screen and (min-width: 400px){
 //css here
}

@media screen and (min-width: 600px){
//css here
}

@media screen and (min-width: 800px){
//css here
}

@media screen and (min-width: 1000px){
//css here
}
Simon Merrick
Simon Merrick
18,305 Points
Simon Merrick
Simon Merrick
18,305 Points

Actually I just found this http://codex.wordpress.org/Styling_for_Mobile which looks like it may be the solution. I will give it a go. Thanks for your time none the less

Rich Bagley
Rich Bagley
25,869 Points

No problem, never experienced an issue with mobile devices not displaying the style sheet of a custom theme. It's an odd one. Sorry I couldn't be more help.

-Rich

Simon Merrick
Simon Merrick
18,305 Points
Simon Merrick
Simon Merrick
18,305 Points

Update: Grrrr so the information at link did not solve my problem, the actual solution was found here. https://wordpress.org/support/topic/css-and-images-not-showing-up-over-network-in-mamp.

It wasn't so much an issue with mobile devices but more so an issue viewing the worpress site from any device that was not my mac (which is hosting a local installation of wordpress for developement).

As described in the link, I changed 'localhost' to my local ip address and it worked like a charm (though there is no longer much hair left on my head). Once again thank you for your time, Rich.

Simon Merrick
Simon Merrick
18,305 Points
Simon Merrick
Simon Merrick
18,305 Points

Update: Grrrr so the information at link did not solve my problem, the actual solution was found here. https://wordpress.org/support/topic/css-and-images-not-showing-up-over-network-in-mamp.

It wasn't so much an issue with mobile devices but more so an issue viewing the worpress site from any device that was not my mac (which is hosting a local installation of wordpress for development). As described in the link, I changed the site url from 'localhost' to my local ip address and it worked like a charm.