mtechama Posted January 31, 2017 Share Posted January 31, 2017 Hello, New here I am currently have 3 different stylesheets for my website: Desktop - layout.css is working fine. Tablet - tablet.css is also working fine. now I have a css for mobile which is mobile.css. On the mobile.css when I look the version on an iPhone 6 the navigation bar is so small. here is the index.html and mobile.css file: Mobile CSS File: body { margin: 0; background-image: url(../images/bg2.jpg); } img { max-width: 100%; height: auto; } ul.topnav { list-style-type: none; margin: 0; padding: 25px; overflow: hidden; background-color: #333; } ul.topnav li {float: left;} ul.topnav li a { display: inline-block; color: #f2f2f2; text-align: center; padding: 30px 16px; text-decoration: none; transition: 0.3s; font-size: 25px; } ul.topnav li a:hover {background-color: #555;} ul.topnav li.icon {display: none;} @media screen and (max-width:320px) { ul.topnav li:not(:first-child) {display: none;} ul.topnav li.icon { float: right; display: inline-block; } } @media screen and (max-width:320px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 0; } ul.topnav.responsive li { float: none; display: inline; } ul.topnav.responsive li a { display: block; text-align: left; } } Index.html file is: <html> <head> <meta charset="utf-8"> <meta name="viewpoint" content="width=device-width,initial=1.0"> <link href="css/mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0px) and (max-width: 320px)" /> <link href="css/tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 321px) and (max-width: 1023px)" /> <link href="css/layout.css" type="text/css" rel="stylesheet" media="screen and (min-width: 1024px)" /> <title>Morris Technologies of Amarillo</title> </head> <body> <div id="wrapper"> <div id="header"> <img src="images/header.jpg" alt="Morris Technologies of Amarillo" width="1000" height="300"> </div> <ul class="topnav" id="myTopnav"> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myFunction()">☰</a> </li> </ul> </div> <script> /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */ function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script> </body> Link to comment Share on other sites More sharing options...
Sunamena Posted February 2, 2017 Share Posted February 2, 2017 First of all i would strongly suggest using a single CSS file and try to work Mobile First.This means:First write your CSS for your Mobile Viewport.Then for tabletsThen for desktops This makes it easier (as for example your color for certain div tags and a tags will be the same, width most likely varies)EXAMPLE: CSS code mobile @media (min-width: 680px) and (max-width: 999px) { CSS code tablet } @media (min-width: 1000px) { CSS code desktop}I have noticed that the device-width of iPhone 6 is 375px, and of iPhone 6 Plus is 414px.Both are larger than your max width, so it would give the Tablet view.Try right clicking and look at your code (or in short: F12) in Chrome, the settings applied might hint which stylesheet got applied. Off topic:Try to use<meta name="description" content="DESCRIPTION OF THIS PAGE">This will be the description given under the title of your page when you appear on a search engine. And it boosts your SEO I hope this helps =D Link to comment Share on other sites More sharing options...
mtechama Posted February 3, 2017 Author Share Posted February 3, 2017 So you are saying that there is no need for 3 different styles? First of all i would strongly suggest using a single CSS file and try to work Mobile First.This means:First write your CSS for your Mobile Viewport.Then for tabletsThen for desktops This makes it easier (as for example your color for certain div tags and a tags will be the same, width most likely varies)EXAMPLE: CSS code mobile @media (min-width: 680px) and (max-width: 999px) { CSS code tablet } @media (min-width: 1000px) { CSS code desktop}I have noticed that the device-width of iPhone 6 is 375px, and of iPhone 6 Plus is 414px.Both are larger than your max width, so it would give the Tablet view.Try right clicking and look at your code (or in short: F12) in Chrome, the settings applied might hint which stylesheet got applied. Off topic:Try to use<meta name="description" content="DESCRIPTION OF THIS PAGE">This will be the description given under the title of your page when you appear on a search engine. And it boosts your SEO I hope this helps =D Link to comment Share on other sites More sharing options...
Sunamena Posted February 3, 2017 Share Posted February 3, 2017 There is no need for three seperate CSS files. It can all fit into one file And with a Mobile First design, you can reuse or modify content.Small example:a {color: green;}a:hover {color: red;} div, main, aside {display: inline-block;box-sizing: border-box;} .container { width: 100%} main {width: 100%;border-bottom: 2px solid black;}aside {width: 100%;}/* TABLET VIEW */ @media (min-width: 680px) and (max-width: 999px) { main { width: 70%;border-bottom: none;}aside {width: 30%; border-left: 2px solid black;} } @media (min-width: 1000px) { .container { width: 80%;margin: auto; } } ------------------------- As for a smartphone navigation, it is better to create a Desktop first navigation, and then use Smartphone nav CSS.Remember: CSS gets read from top to bottom.a {color: red; } a {color: blue} Will result in a blue color.Since the second will override the first. Link to comment Share on other sites More sharing options...
mtechama Posted February 4, 2017 Author Share Posted February 4, 2017 Ok, I understand on that one. Since there different sizes of smartphone do I need to set each code for each size of screen (mobile)? There is no need for three seperate CSS files. It can all fit into one file And with a Mobile First design, you can reuse or modify content.Small example:a {color: green;}a:hover {color: red;} div, main, aside {display: inline-block;box-sizing: border-box;} .container { width: 100%} main {width: 100%;border-bottom: 2px solid black;}aside {width: 100%;}/* TABLET VIEW */ @media (min-width: 680px) and (max-width: 999px) { main { width: 70%;border-bottom: none;}aside {width: 30%; border-left: 2px solid black;} } @media (min-width: 1000px) { .container { width: 80%;margin: auto; } } ------------------------- As for a smartphone navigation, it is better to create a Desktop first navigation, and then use Smartphone nav CSS.Remember: CSS gets read from top to bottom.a {color: red; } a {color: blue} Will result in a blue color.Since the second will override the first. Link to comment Share on other sites More sharing options...
Sunamena Posted February 4, 2017 Share Posted February 4, 2017 Technically you can. But most of the time you will only use three different styles and use width: xxx%, so it adjust to the screen width. Link to comment Share on other sites More sharing options...
mtechama Posted February 5, 2017 Author Share Posted February 5, 2017 I am getting the hang of it. One question I am using this menu for the responsive: http://www.w3schools.com/howto/howto_js_topnav.asp On the mobile phones how can just use the 3 bars instead showing the home for the drop down? Technically you can. But most of the time you will only use three different styles and use width: xxx%, so it adjust to the screen width. Link to comment Share on other sites More sharing options...
Sunamena Posted February 5, 2017 Share Posted February 5, 2017 If i am not mistaken:ul.topnav li:not(:first-child) {display: none;}not(:first-child)should be deleted.Not sure if the li before the :not should be deleted.Try that out =D Link to comment Share on other sites More sharing options...
mtechama Posted February 5, 2017 Author Share Posted February 5, 2017 (edited) Ok, what I did to remove home is: ul.topnav li:not(:first-child) {display: none;} to ul.topnav li:not(none) {display: none;} and it worked. Now I go my image on the bottom of the menu. When I click the 3 buttons on the right the menu expands the image drops down with it. How can I stop that? Edited February 5, 2017 by mtechama Link to comment Share on other sites More sharing options...
mtechama Posted February 6, 2017 Author Share Posted February 6, 2017 Doing it all in one CSS is conflicting each other. Is there another options? There is no need for three seperate CSS files. It can all fit into one file And with a Mobile First design, you can reuse or modify content.Small example:a {color: green;}a:hover {color: red;} div, main, aside {display: inline-block;box-sizing: border-box;} .container { width: 100%} main {width: 100%;border-bottom: 2px solid black;}aside {width: 100%;}/* TABLET VIEW */ @media (min-width: 680px) and (max-width: 999px) { main { width: 70%;border-bottom: none;}aside {width: 30%; border-left: 2px solid black;} } @media (min-width: 1000px) { .container { width: 80%;margin: auto; } } ------------------------- As for a smartphone navigation, it is better to create a Desktop first navigation, and then use Smartphone nav CSS.Remember: CSS gets read from top to bottom.a {color: red; } a {color: blue} Will result in a blue color.Since the second will override the first. 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