CSS doesn't work on mobile
-
Hello there,
I’ve been trying to make some nice looking template for my website.
First only desktop-themed. After that I will try to make some phone-friendly theme also.At this moment I’ve got some beginning for the theme, but when I load it on my phone my CSS is just not working.
How can I fix this problem? Hope you can help me.
My index.php showing up when loading page is:
<!DOCTYPE html> <html lang="nl"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2"> <link rel="stylesheet" type="text/css" media="all" href="https://127.0.0.1/wordpressplayground/wp-content/themes/robertvanlienden/style.css" /> <title>MyPlayGround – My Personal Playground</title> <link rel="alternate" type="application/rss+xml" title="MyPlayGround ? Feed" href="https://127.0.0.1/wordpressplayground/?feed=rss2" /> <link rel="alternate" type="application/rss+xml" title="MyPlayGround ? Reactiesfeed" href="https://127.0.0.1/wordpressplayground/?feed=comments-rss2" /> <script type="text/javascript"> window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/127.0.0.1\/wordpressplayground\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.5.3"}}; !function(a,b,c){function d(a){var c,d,e,f=b.createElement("canvas"),g=f.getContext&&f.getContext("2d"),h=String.fromCharCode;if(!g||!g.fillText)return!1;switch(g.textBaseline="top",g.font="600 32px Arial",a){case"flag":return g.fillText(h(55356,56806,55356,56826),0,0),f.toDataURL().length>3e3;case"diversity":return g.fillText(h(55356,57221),0,0),c=g.getImageData(16,16,1,1).data,d=c[0]+","+c[1]+","+c[2]+","+c[3],g.fillText(h(55356,57221,55356,57343),0,0),c=g.getImageData(16,16,1,1).data,e=c[0]+","+c[1]+","+c[2]+","+c[3],d!==e;case"simple":return g.fillText(h(55357,56835),0,0),0!==g.getImageData(16,16,1,1).data[0];case"unicode8":return g.fillText(h(55356,57135),0,0),0!==g.getImageData(16,16,1,1).data[0]}return!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i;for(i=Array("simple","flag","unicode8","diversity"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings); </script> <style type="text/css"> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 .07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <script type='text/javascript' src='https://127.0.0.1/wordpressplayground/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> <script type='text/javascript' src='https://127.0.0.1/wordpressplayground/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script> <link rel='https://api.w.org/' href='https://127.0.0.1/wordpressplayground/?rest_route=/' /> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://127.0.0.1/wordpressplayground/xmlrpc.php?rsd" /> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="https://127.0.0.1/wordpressplayground/wp-includes/wlwmanifest.xml" /> <meta name="generator" content="WordPress 4.5.3" /> <link rel="canonical" href="https://127.0.0.1/wordpressplayground/" /> <link rel='shortlink' href='https://127.0.0.1/wordpressplayground/' /> <link rel="alternate" type="application/json+oembed" href="https://127.0.0.1/wordpressplayground/?rest_route=%2Foembed%2F1.0%2Fembed&url=http%3A%2F%2F127.0.0.1%2Fwordpressplayground%2F" /> <link rel="alternate" type="text/xml+oembed" href="https://127.0.0.1/wordpressplayground/?rest_route=%2Foembed%2F1.0%2Fembed&url=http%3A%2F%2F127.0.0.1%2Fwordpressplayground%2F&format=xml" /> </head> <body class="home page page-id-3 page-template-default"> <div id="wrapper" class="hfeed"> <header id="site-header" role="banner"> <section id="branding"> <div id="site-title"><h1><a href="https://127.0.0.1/wordpressplayground/" title="MyPlayGround" rel="home">MyPlayGround</a></h1></div> <div id="site-description">My Personal Playground</div> </section> </header> <nav id="navmenu" role="navigation"> <ul> <li> <div class="menu-hoofdmenu-container"><ul id="menu-hoofdmenu" class="menu"><li id="menu-item-18" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-3 current_page_item menu-item-18"><a href="https://127.0.0.1/wordpressplayground/">Home</a></li> <li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-19"><a href="https://127.0.0.1/wordpressplayground/?page_id=5">Lorep</a></li> <li id="menu-item-20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20"><a href="https://127.0.0.1/wordpressplayground/?page_id=7">Isum</a></li> <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="https://127.0.0.1/wordpressplayground/?page_id=9">Dolor</a></li> </ul></div></li> </ul> </nav> <div id="container"> <aside id="sidebar" role="complementary"> <div id="primary" class="widget-area"> <ul class="xoxo"> <li id="search-3" class="widget-container widget_search"><h3 class="widget-title">Zoeken</h3><form role="search" method="get" id="searchform" class="searchform" action="https://127.0.0.1/wordpressplayground/"> <div> <label class="screen-reader-text" for="s">Zoeken naar:</label> <input type="text" value="" name="s" id="s" /> <input type="submit" id="searchsubmit" value="Zoeken" /> </div> </form></li><li id="text-12" class="widget-container widget_text"><h3 class="widget-title">Widgets</h3> <div class="textwidget">Widgets overal</div> </li><li id="categories-3" class="widget-container widget_categories"><h3 class="widget-title">Categorieen</h3> <ul> <li class="cat-item cat-item-1"><a href="https://127.0.0.1/wordpressplayground/?cat=1" >Geen categorie</a> </li> </ul> </li><li id="pages-3" class="widget-container widget_pages"><h3 class="widget-title">PAginaaaas</h3> <ul> <li class="page_item page-item-9"><a href="https://127.0.0.1/wordpressplayground/?page_id=9">Dolor</a></li> <li class="page_item page-item-3 current_page_item"><a href="https://127.0.0.1/wordpressplayground/">Home</a></li> <li class="page_item page-item-7"><a href="https://127.0.0.1/wordpressplayground/?page_id=7">Isum</a></li> <li class="page_item page-item-5"><a href="https://127.0.0.1/wordpressplayground/?page_id=5">Lorep</a></li> </ul> </li><li id="meta-3" class="widget-container widget_meta"><h3 class="widget-title">Meta</h3> <ul> <li><a href="https://127.0.0.1/wordpressplayground/wp-login.php">Inloggen</a></li> <li><a href="https://127.0.0.1/wordpressplayground/?feed=rss2">Berichten <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="https://127.0.0.1/wordpressplayground/?feed=comments-rss2">Reacties <abbr title="Really Simple Syndication">RSS</abbr></a></li> <li><a href="https://nl.www.ads-software.com/" title="Mogelijk gemaakt door WordPress.">www.ads-software.com</a></li> </ul> </li></ul> </div> </aside><section id="content" role="main"> <article id="post-3" class="post-3 page type-page status-publish hentry"> <header class="header"> <h1 class="entry-title">Home</h1> </header> <section class="entry-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque pellentesque nunc lorem. Fusce eget rhoncus felis, quis vehicula erat. In at mauris quis tellus elementum sodales. Donec lacinia gravida tortor quis interdum. Aenean ut velit ac sem venenatis facilisis quis sed velit. Nunc orci dolor, feugiat at volutpat eget, porta sed sapien. Nullam consectetur auctor lectus in commodo. Cras auctor odio a arcu porta porttitor. Duis varius, diam sed tempor tincidunt, nisl augue sollicitudin ex, eget tincidunt orci nibh placerat sapien. Fusce augue risus, aliquet efficitur elit quis, ultrices ullamcorper augue.</p> <p>Proin ante est, ornare et sapien non, maximus sodales elit. Donec eu consectetur ex. Sed iaculis sodales varius. Sed nulla quam, tincidunt ut odio sit amet, feugiat molestie erat. Ut sodales, ipsum eget pulvinar laoreet, sem augue euismod massa, vitae dapibus elit metus vitae neque. Vivamus semper viverra tempor. Praesent ac metus purus. Cras maximus magna in nisl rutrum, quis condimentum felis blandit. Etiam fermentum massa nibh, tincidunt tincidunt lorem volutpat ut.</p> <p>Ut et bibendum lacus, nec molestie turpis. Praesent accumsan, arcu sit amet aliquet sagittis, mi ligula maximus lorem, sit amet congue massa diam vulputate lacus. Mauris eget finibus ligula. Proin euismod neque purus, eu maximus tortor venenatis id. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas convallis enim vel lacus pellentesque, ac tincidunt ipsum iaculis. Vivamus suscipit, augue et ultricies ultricies, metus tortor vulputate magna, sed consectetur dolor nisi vitae libero. Fusce suscipit, enim et dignissim rhoncus, eros sem pulvinar ipsum, vitae consequat dui ipsum at nisl. Donec maximus erat id ex faucibus, sit amet aliquam nisl pellentesque. Phasellus lectus leo, sodales quis placerat et, porta dapibus lacus. Nullam fermentum cursus elementum.</p> <p>Donec lacus ipsum, ultrices a tempus sit amet, auctor at mauris. Pellentesque et metus erat. Vestibulum efficitur magna et risus aliquam viverra. Nam in mauris lacus. Proin nulla elit, aliquam efficitur aliquet rhoncus, consectetur commodo erat. Fusce in malesuada magna. Nullam sagittis nunc elit, eget porttitor mi malesuada in. Etiam pharetra auctor rhoncus. Phasellus leo nulla, ultricies eu lorem ac, suscipit porttitor enim. Nullam interdum arcu et mauris lobortis cursus. Curabitur ultrices vulputate est, sed vehicula velit cursus eget. Aliquam quis semper odio, in accumsan nunc. Donec a massa pellentesque, gravida tellus vel, tincidunt enim.</p> <div class="entry-links"></div> </section> </article> <div id="underwidgets"> </div> <section id="comments"> </section></section> <div class="clear"></div> </div> <footer id="footer" role="contentinfo"> <div id="copyright"> ? 2016 MyPlayGround. All Rights Reserved. Theme By: <a href="https://tidythemes.com/">TidyThemes</a>.</div> </footer> </div> <script type='text/javascript' src='https://127.0.0.1/wordpressplayground/wp-includes/js/wp-embed.min.js?ver=4.5.3'></script> </body> </html> CSS: /* Theme Name: Robertvanlienden Theme URI: https://www.robertvanlienden.nl/ Author: Robert van Lienden Author URI: https://www.robertvanlienden.nl Description: Build on the base of https://www.tidythemes.com/ BlankSlate. Design and coding by Robert van Lienden Version: 1.0 Version-base: BlankSlate base 4.0.3 License: Private Tags: Text Domain: robertvanlienden */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both} .sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important} html{ height: 100%; } body{ height: 100%; } /* Wrapper */ #wrapper { height: 100%; } /* header */ #site-header { height: 125px; background-color: #333366; } #site-title { } #site-title a { } #site-title a:hover { } #site-description { } #branding { } /* menu */ #navmenu { height: 50px; background-color: #99cccc; } #navmenu ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } #navmenu li { display: inline; padding: 5px 20px 5px 20px } #navmenu a { } #navmenu a:hover { } /* content */ #container { background-color: #cccccc; height: 100%; } .entry-title{ float: left; height: 10%; width: 75%; background-color: #006699; height: 40px; } .entry-content { float: left; width: 75%; height: 100%; min-height: 100%; background-color: #cccccc; clear: left; } /* widgets */ .widget-area { background-color: #339999; } .widget-title { } .textwidget { } #sidebar{ width: 25%; float: right; height: 100%; background-color: #339999; clear: right; } /* footer */ #footer { background-color: #333366; height: 50px; clear: both; } #copyright { } #calltoaction { } #underwidgets { background-color: #339999; } @media only screen and (max-device-width: 480px) { html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both} .sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}.screen-reader-text{clip:rect(1px, 1px, 1px, 1px);position:absolute !important} html{ height: 100%; } body{ height: 100%; } /* Wrapper */ #wrapper { height: 100%; } /* header */ #site-header { height: 125px; background-color: #333366; } #site-title { } #site-title a { } #site-title a:hover { } #site-description { } #branding { } /* menu */ #navmenu { height: 50px; background-color: #99cccc; } #navmenu ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; } #navmenu li { display: inline; padding: 5px 20px 5px 20px } #navmenu a { } #navmenu a:hover { } /* content */ #container { background-color: #cccccc; height: 100%; } .entry-title{ float: left; height: 10%; width: 75%; background-color: #006699; height: 40px; } .entry-content { float: left; width: 75%; height: 100%; min-height: 100%; background-color: #cccccc; clear: left; } /* widgets */ .widget-area { background-color: #339999; } .widget-title { } .textwidget { } #sidebar{ width: 25%; float: right; height: 100%; background-color: #339999; clear: right; } /* footer */ #footer { background-color: #333366; height: 50px; clear: both; } #copyright { } #calltoaction { } #underwidgets { background-color: #339999; } }As you can see, I used the base of BlankSlate.
Hope someone can help me!
Viewing 4 replies - 1 through 4 (of 4 total)
Viewing 4 replies - 1 through 4 (of 4 total)
- The topic ‘CSS doesn't work on mobile’ is closed to new replies.