dmacfang8 Posted June 26, 2016 Share Posted June 26, 2016 <!DOCTYPE html> <html> <style> body { font-family: "Lato", sans-serif; transition: background-color .5s; max-width: 300px; } .sidenav { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: #111; overflow-x: hidden; transition: 0.5s; padding-top: 60px; } .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s } .sidenav a:hover, .offcanvas a:focus{ color: #f1f1f1; } .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px !important; margin-left: 50px; } #main { transition: margin-left .5s; padding: 16px; } @media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;} } .button { padding: 15px 25px; font-size: 24px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #000; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .button:hover {background-color: #000} .button:active { background-color: #999; box-shadow: 0 5px #666; transform: translateY(4px); } #main { width: auto; } </style> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">☓</a> <ul> <li> <a href="home.html">Home</a> <a href="socialMedia.html">Social Media</a> </li> </ul> </div> <div id="main"> <span style="font-size:30px;cursor:pointer" onclick="openNav()" button class="button">☰</button></span> <h2>Social Media</h2> </div> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; document.getElementById("main").style.marginLeft = "250px"; document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; } function closeNav() { document.getElementById("mySidenav").style.width = "0"; document.getElementById("main").style.marginLeft= "0"; document.body.style.backgroundColor = "white"; } </script> </body> </html> im trying to get it to fit to mobile but its not. the home page fits and i did what i did there to here. Link to comment Share on other sites More sharing options...
Ingolme Posted June 26, 2016 Share Posted June 26, 2016 You don't have a meta viewport tag on this page. Link to comment Share on other sites More sharing options...
johnniewalk Posted August 3, 2016 Share Posted August 3, 2016 In this code there is no much information that's the thing you done wrong.. 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