[SOLVED] Mobile version not picking up stylesheet

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
Masonator
New Member
New Member
Posts: 2
Joined: Wed Oct 17, 2012 5:04 pm

[SOLVED] Mobile version not picking up stylesheet

Post by Masonator »

I am completely lost here and need some help. I am assuming it's something simple and stupid that I am overseeing but it's been all week and i'm near tears.

I have a few sites set up now with CMSMS and it's amazing, so simple to use for someone like me who hasn't really got the first clue. This particular site isn't used much at all so I'd thought i'd use it as a test site for getting the mobile side of things working.

The site, http://www.hqpm.co.uk, is running CMSMS 1.9.4.2 with PHP 5.2.17 on an Apache server. It runs perfectly well, CSS is valid (for desktop site) and the HTML is as valid as I care to have it.

I am trying to create a mobile version of my site using Gorans incredibly simple blogpost (http://www.i-do-this.com/blog/14/Make-y ... bile-ready)

and it all worked really well... apart from the mobile version isn't picking up the CSS I have created for it.

In the main site template I have put this:

Code: Select all

{* This is the mobile bit *}
{if $mobiletemp}
{cms_stylesheet name='mobilestyle'}
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
{else}
{cms_stylesheet}{/if}
{* This is the mobile bit *}

</head>

</__body>
<!--MOBILE TEST-->
{if $mobiletemp}
</__body>
<div id="header">
{sitename}
 </div>
<div id="menu">
 {menu template='mobiletemplate'}
 </div>
<div id="content">
 {content}
 </div>
{else}
<!--END MOBILE TEST-->
I have set up the mobile device detect function and created the stylesheet 'mobilestyle' with some simple CSS as a basic test, but it's just not picking it up. The CSS, for now, is this:

Code: Select all

#primary-nav ul {
     list-style-type:none; 
}

img.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto; }
I have a Samsung Galaxy S2 running android 4. The site loads on my phone with the correct content specified for mobiles, but no style at all.

When I check the source code using an app on my phone I can see that the correct css file is being included (the one above), but it's just not having any effect on the actual site.

I've tried to include as much as possible here but if I am missing anything please let me know.

Thanks in advance!
Last edited by Masonator on Wed Oct 17, 2012 7:39 pm, edited 1 time in total.
uniqu3

Re: Mobile version not picking up stylesheet

Post by uniqu3 »

If correct Stylesheet is loaded, then it works, but you might have issues with invalid code.

Code: Select all

</__body>
<!--MOBILE TEST-->
{if $mobiletemp}
</__body>
See, </__body> in your case will be output 2x.
Masonator
New Member
New Member
Posts: 2
Joined: Wed Oct 17, 2012 5:04 pm

Re: Mobile version not picking up stylesheet

Post by Masonator »

Thank you! Code was a mess. given it a once over and it's all working fine now.
Post Reply

Return to “Layout and Design (CSS & HTML)”