CSS Font-size not working properly on mobile device - html

I'm working on a small project for school, where we have to incorporate html5 and css3. It's just in the begin stage now, as I'm trying to create two separate css-files for a mobile and a desktop version.
For the mobile version, I'm trying to get the menu to just show as a list, but with a bigger font. I can in no way get this working though.
This is the css for the menu:
nav ul {
list-style: none;
background-color: green;
padding: 0;
}
nav li {
border-bottom: 1px solid black;
padding: 5px;
}
nav {
margin-top: -36px;
width: 100%
}
nav h1{
margin: 0;
}
This creates the following on my desktop
And on my iPhone
The font-size is set to 1em in the HTML in the top of the file. But 1em is not big enough for mobile devices, so I want it bigger, which seems impossible.
Even when I give the nav h1 a font-size of 10em, it doesn't get bigger than this:
While on my desktop it does work without a problem, there it looks like this:
The same problem occurs when trying to make the "blog posts" bigger, they just won't do it.
I normally have no trouble working with CSS, but this time I can't figure it out. Hope anyone can help! I have the feeling it's something very obvious.
Here is the complete CSS: http://snipt.org/zLic5
Here is the html: http://snipt.org/zLid2

i saw your html code. you are not adding any meta tag. certain meta tags are required, when you are developing mobile website,
for example you have to add -
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>Welcome to your school name</title>
<!-- smart phone css -->
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
<!-- Tablet -->
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />
<!-- Desktop -->
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">

I see a couple things I think can help your situation. Semantically, you don't want to use <h1> tags in your menu list at all. Remove those tags and apply the styling to the nav li css style and adjust the padding accordingly. Also, just a recommendation, but I've heard from a few websites that the ideal mobile font sizing is pt.
I hope this helps.

Go back to using the li for you navigation.
Then set the font-size to something acceptable (14px or 16px).
Then, in your css, use media-queries.
#media (max-width: 480px) { // will only happen on viewport less then 480 pixels (mobile)
li {
font-size:18px; // larger font (or whatever you want to do
padding: 20px; // can even increase your padding
}
}

Try css property text-size-adjust to scale text on mobile devices. Something like:
nav {
text-size-adjust: 200%;
}
nav ul {
text-size-adjust: 300%;
}
nav h1 {
text-size-adjust: 400%;
}

Related

iPhone 5 Media Queries Not Working Inside Iframe

I have a container page which loads an iframe, which is set to 99% width and height. The content of the iframe is responsive, using media queries. The container page happens to also be responsive, using media queries, but I don't think that's particularly important here.
This works fine on modern browsers, and on iPhone 6, but it doesn't work on iPhone 5. The 5 is entirely ignoring the media queries.
You can test this using Chrome's iPhone 5 emulator and the problem is immediately visible. Using the sample code below, the paragraph should have a border color #f00, but instead it remains #ccc. I also verified on a real iPhone 5 and it matched Chrome's emulation.
Note that if you load the iframe content in a separate page, the media queries work just fine on iPhone 5 - the problem only occurs when loaded inside an iframe.
Has anyone found a way to make this work? Am I going to need some kind of javascript hack?
Container Source Code (container.htm):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe src="iframeContent.htm" style="border: none; height: 99%; width: 99%; margin: 0px; padding: 0px;"></iframe>
</body>
</html>
Iframe Source Code (iframeContent.htm):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p { border: 1px solid #ccc; }
#media screen and (min-width: 310px) {
p { border: 1px solid #f00; }
}
#media screen and (min-width: 350px) {
p { border: 1px solid #00f; }
}
</style>
</head>
<body>
<p>here is a paragraph of content.</p>
</body>
</html>
Arg, the problem had nothing to do with the media queries not being supported via iframe, or with iPhone 5.
With the iframe being 99% width, and the default 8px margin on the body element, the content inside the iframe thought that the screen was only 301px wide, which was too small to be covered by the 310px width media query, and there were no other rules that caught it.
I fixed it by making the base media query 200px.
#media screen and (min-width: 200px) {
p { border: 1px solid #f00; }
}

Mobile css reverts back to desktop version of site on smartphone

I'm using a basic method of "mobilizing" my desktop site using different style sheets. At the top of every page of my site, I have this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://scoresquare.net/css/screen.css" type="text/css" media="Screen" />
<link rel="stylesheet" href="http://scoresquare.net/css/mobile.css" type="text/css" media="handheld" />
Whenever a user logs into my site from a smartphone, it goes to the home page [index.php] which also has the abovementioned code at the top. There are eight buttons on the home page, and whichever choice the user makes, the site properly displays the mobile version on their smartphone.
HOWEVER, whenever the user decides to return to the home page via a button on any other page, index.php displays in the DESKTOP version on their smartphone. In other words, index.php displays properly the first time on a smartphone, but not the second (and every subsequent) time.
If the user just hits the BACK button on his smartphone browser to get back to the home page, index.php displays the proper mobile format.
FWIW, each home page button involves my program querying a SQL database and returning data (which works just fine). Does this somehow reset the style sheet functionality?
If it matters, mymobile.css looks like this:
/* mobile styles */
#media handheld {
html, body {
font: 12px/15px sans-serif;
background: #fff;
padding: 3px;
color: #000;
margin: 0;
}
#sidebar, #footer {
display: none;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
#content img {
max-width: 250px;
}
.center {
width: 100% !important;
text-align: center;
}
a:link, a:visited {
text-decoration: underline;
color: #0000CC;
}
a:hover, a:active {
text-decoration: underline;
color: #660066;
}
}
/* iPad [portrait + landscape] */
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
/* iPhone [portrait + landscape] */
#media only screen and (max-device-width: 480px) {
.selector-01 { margin: 10px; }
.selector-02 { margin: 10px; }
.selector-03 { margin: 10px; }
}
Any idea what might be causing this?
Strange that it works on the first load!
The valid media types are "all," "print," "screen," and "speech." In current practice, "screen" is often considered equivalent to "all", and the type is simply left out (leaving media type specification for cases of print-only and screen reader-only styles).
Media queries in a linked stylesheet will look something like
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
(that was copied from this write-up of how to use media queries)
In your case, the final markup will be similar to
<link rel="stylesheet" href="http://scoresquare.net/css/screen.css" type="text/css" />
<link rel="stylesheet" href="http://scoresquare.net/css/mobile.css" type="text/css" media="(max-width: 400px)" />
(I don't know what width you're using as a "handheld" breakpoint, so I just used 400px. CSS-Tricks' Media Queries for Standard Devices is one good reference for max-width mobile break points… it's rare that you'd bother targeting a specific device, but for example this shows you that a breakpoint at 800px will catch the most popular tablets)

CSS - How to display an object when it is on mobile?

My goal is to get a big button to show on the website when it's on mobile. I want it to show when the screen is at 600px width maximum. Also, I've written some code with my classmates.
We want it to show the div tag when it's on a mobile device.
We'd love your guidance, thank you.
#media screen and (width:600px;){
.button {
display: url(http://examplepicture.com/blablabla);
}
}
#media screen and (max-width:600px){
.button {
display: block; /* alternatively inline-block */
}
}
to show on mobile. You can then have the "default" setting in your main css file to have that div hidden:
.button {
display: none;
background-image: url('http://examplepicture.com/blablabla');
/* other properties go here */
}
This will make the .button class object be hidden on viewports greater than 600px, and visible if lower.
Demo
There is no such thing as "css = mobile". You have to bind some css rules to the screen resolution.
Since all mobiles have different screen resolution, you will have to subjectively choose a limit where you consider the screen being a mobile one.
Putting:
#media screen and (max-width:600px){
.button {
display: block;
}
}
Will show the button class to every screen with a resolution less than 600px, being a mobile or a small windowed computer browser. And it will not show on tablets with more than 600px width.
Any Windows or Linux or MacOS user on a desktop computer will be able to see the "mobile" version of a website if they shrink their browser's window.
EDIT: I updated the code.
make sure you have this in your <head> section of your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
You have some syntax errors in your css. Try this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/8/
#media (max-width:600px){
.button {
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
}
And if you want the button not to be visible over 600px do this: https://jsfiddle.net/DIRTY_SMITH/esptpmwk/10/
.button {
display: none;
width: 200px;
height: 200px;
background-image: url("http://lorempixel.com/400/200/");
}
#media (max-width:600px){
.button {display: inline;}
}
Step 1 : <meta name="viewport" content="width=device-width, initial-scale=1">
Step 2 : <div class="onphone">Hello</div>
Step 3 :
.onphone{display:block;}
#media screen and (max-width:768px){
.onphone{display:none;}
}
It's typically better to create individual CSS sheets for mobile devices... In that case you can do media selectors for your CSS sheets... Here is basically what I use in most cases
<!-- Desktop: Firefox , Chrome , IE -->
<link rel="stylesheet" media="all and (min-device-width:769px)"href="/CSS/Style.css"/>
<!-- Mobile devices: phone and ipad -->
<link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)"href="/CSS/phone_portrait_style.css" />
<link rel="stylesheet" media="all and (max-device-width: 640px) and (orientation:landscape)"href="/CSS/phone_landscape_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)"href="/CSS/ipad_portrait_style.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)"href="/CSS/ipad_landscape_style.css" />
Then in each of those sheets, you can create the CSS you want to be shown on whichever specific device you'd like. So for a phone maybe the button is 240px when in portrait, but 320px in landscape.
Just be careful, because the way you have it, your CSS for phones will ONLY be displayed if the resolution is exactly 600px.
You should also note that in your mobile portrait css sheet you should have:
.button {
display: block;
width:100px;
background-image: url('http://examplepicture.com/blablabla');
}
and in the desktop css:
.button {
display: none;
}
And if you don't like this method, I was just trying to get you bonus points for different sized buttons for different phone/tablet orientations ;)
so on phone portrait css
.button{
display: block;
width:200px;
background-image: url('http://examplepicture.com/blablabla');
}
And BAM! You got some device-reactive CSS sheets that will impress mom and dad!

Simplified: White space on mobile when defining div min-width

Problem: White space appears at bottom of page on mobile Chrome.
I gutted everything to isolate the problem. There's now a single div. Page takes up full viewport just fine, until I define a min-width for the div.
I tried a css reset. Did not solve problem.
Am I just not properly using min-width?
Edit (link to page): http://www.hauntedbuckscounty.com/Tools/Environment.php
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Haunted Bucks County (HBC)</title>
<!-- jQuery -->
<script type="text/javascript" src="http://www.hauntedbuckscounty.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="http://www.hauntedbuckscounty.com/style_theme.html">
<link rel="stylesheet" href="http://www.hauntedbuckscounty.com/CSS/reset_main.css">
<link rel="stylesheet" href="http://www.hauntedbuckscounty.com/CSS/reset_normalize.css">
<link rel="stylesheet" media="(min-width: 1200px)" href="Carousel_1200px.css">
<link rel="stylesheet" media="(max-width: 1199px) and (min-width: 0px)" href="Carousel_768px.css"> <!--MIN NORMALLY 768 BUT TEMPORARILY SET TO ZERO TO ALLOW LATER DEV OF MOBILE VERSION-->
<style>
* { border: 0px solid red; }
html {border:0px blue solid;}
footer {
margin-top: 0px;
padding-top: 0px;
}
</style>
</head>
<body style="background-image:linear-gradient(#0E0E0F 70%, #1B1B1C);border:0px white solid;">
<div id="Nav" style="position:relative;height:50px; width:100%;min-width:650px;
background-color:blue;">
</div>
</body>
</html>
If you want to create a responsive layout, for mobile devices, you should never use static min-width values, as there are many devices with different screen resolutions.
To solve your issue just don't use the min-width property, rather just use width: 100% for the media query that you prefer, i.e.
#media screen only and (max-width: 767px) {
#Nav { width: 100%; }
}
If you continue to use min-width for responsive layouts, you will always end up with a ugly scrollbar or unwanted widths of elements inside your website.

How can I use meta viewport and CSS media queries to make the average 960px website look good on the iPhone and iPad?

Question
I know there are a lot of questions on Stack Overflow about the meta viewport tag, but I can't find anyone asking what seems to be the most obvious and useful question:
How can I use meta viewport and CSS media queries to make the average 960px website design look good on the iPad (and desktop), while still retaining a smaller viewport and site design (e.g., 320px) for the iPhone and other mobile phones?
For the iPhone, I think it goes without saying: a smaller, phone-friendly site (e.g., 320px wide) is ideal. But for the iPad's larger screen, a special mobile site isn't really necessary; using the normal 960px site design seems appropriate. A 320px site looks clownish on the iPad, and I don't always want to design a third variation for the iPad's 768px.
Here's the problem: I can't figure out how to use the meta viewport tag and CSS media queries to achieve both 1) a normal site on the iPad, and 2) a mobile site on the iPhone. I realize it's possible with JavaScript hacks (e.g., dynamically changing the meta viewport tag according to the device), but I don't want to use JavaScript; I don't think JS should be required to achieve basic usability on a simple website with static content.
1) If I remove the meta viewport tag altogether, my normal 960px site looks perfect on the iPad, but bad on the iPhone (large empty margin on the right side):
2) On the other hand, if I use <meta name="viewport" content="width=device-width" />, then the site looks great on the iPhone, but bad on the iPad (zoomed to 768px, site spills outside of the viewport):
This seems like it should be the simplest thing in the world, but I haven't been able to solve it. What am I missing?
Markup/CSS
CSS:
<style type="text/css">
body { margin: 0; }
.mobile { width: 320px; background: #fdd; display: none; }
.desktop { width: 960px; background: #ddf; }
</style>
<style type="text/css" media="screen and (max-device-width: 480px)">
.mobile { display: block; }
.desktop { display: none; }
</style>
Markup:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div class="mobile">Phone (320px)</div>
<div class="desktop">Desktop and tablet (960px)</div>
</body>
</html>
Combine a media query with zoom.
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
html {zoom:0.8;}
}
Try adding maximum-scale to your meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
You could use JS to rip out the meta viewport tags like Cole discusses here - http://cole007.net/blog/136/responsiveish-viewport-hack there's also another option in the comments
I use Serban Ghita's php Mobile Detection method:
https://github.com/serbanghita/Mobile-Detect
...then this php in the head tag:
<?php
if ($detect->isMobile() && !$detect->isTablet()) {?>
<meta name="viewport" content="width=device-width, initial-scale=1.0, max-scale = 1.0">
<?php } ?>
Works great.