JKLM Posted July 1, 2013 Share Posted July 1, 2013 I am building a new responsive designed website (my first one) and I seem to be having some issues with the mobile detection for CSS. My site will re-size and displays great on all my mobile devices, Phone, iPad, desktop etc. If I re-size the desktop browser it changes to the correct version based on size etc.. The problem i am having is when I run it through tthe W3C mobileOK validator. I get a score of zero because it seems to be loading all parts of my style sheet. So this brings up the help I need. What should I change in my current CSS? Should I create two separate CSS files and try to do some type of browser detect and serve up the correct version based on browser? I was under impression I should only use one CSS file. My current CSS File: http://cdn.shopify.com/s/files/1/0244/3437/t/1/assets/styles.css?50092 My website (NSFW): http://www.mypleasurebox.com/ W3C Validator score of ZERO 8(: http://validator.w3.org/mobile/check?task=2013070102014242.mobile2&docAddr=http%3A%2F%2Fwww.mypleasurebox.com%2F Thank You for any help. Link to comment Share on other sites More sharing options...
JKLM Posted July 1, 2013 Author Share Posted July 1, 2013 Tough one I guess? Link to comment Share on other sites More sharing options...
Ingolme Posted July 1, 2013 Share Posted July 1, 2013 They have a list of problems there in the validator, which you should fix. They even provide possible solutions for each one. Here are some of the problems the validator shows: There are more than 20 embedded external resources The total size of the page (969.4KB) exceeds 20 kilobytes (Primary document: 31.4KB, Images: 842.3KB, Style sheets: 95.7KB) The CSS style sheet is not syntactically valid CSS The document is served without caching information ("Expires" or "Cache-Control" header) The size of the document's markup (31.4KB) exceeds 10 kilobytes ... Link to comment Share on other sites More sharing options...
JKLM Posted July 1, 2013 Author Share Posted July 1, 2013 Foxy thank you for your response.. The problem I am having is the validator seems to be pulling my entire css file and not just focusing on my mobile part. I was trying to use one style sheet for desktop and mobile versions so i would have to have the images for both versions in there. How do I get the validator to just focus on my mobile site? Should I use two separate style sheets? Is the "@media only screen and (min-width:768px) and (max-width:1026px){.logo{max-width:738px;}" markups incorrect how I have them setup? Thank You Link to comment Share on other sites More sharing options...
Ingolme Posted July 2, 2013 Share Posted July 2, 2013 Your CSS stylesheet on its own is already 13kb. When the browser downloads it it doesn't distinguish different parts, it downloads the entire thing before reading it. I can't distinguish different part in it either. There's still the fact that more than 20 HTTP requests are being called from your site. Does your site have a mobile version or is the page I'm seeing from my laptop the same one that mobile devices are loading? If the validator is reading your ordinary site, try copying the mobile site to a temporary directory to test it. Link to comment Share on other sites More sharing options...
JKLM Posted July 2, 2013 Author Share Posted July 2, 2013 I am using one style sheet and a responsive designed page so if you resize your browser you will see the page resize itself. This is my first responsive design website thats why I am trying to find solutions. I will keep playing around with the validator to see if i can get some of the errors fixed. Thank You for you help I just don't know enough how to do the responsive style. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now