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

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.

Related

How to fix media queries in css?

I need to create desktop and mobile versions of the site. I decided to use media queries in CSS. But when I coded them, I found out that they aren't working and I don't know how to fix them. To fix this issue I went to Youtube where found this example, but I implemented that I found that the media query doesn't work. Then I went to stack and found a similar problem. In that case, it was fixed by adding a meta tag in the head. I did that, but it didn't help me. It wasn't work in chrome and Mozilla.
body{
color:red;
}
#media screen and (max-width: 600){
body{
color: blue;
}
}
<!DOCTYPE html>
<html>
<head>
<title>The car dealer site</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<h1>Title</h1><br>
<h2>Subtitle</h2>
</body>
</html>
You need to specify the units for your max-width property. Change the line
#media screen and (max-width: 600){
to
#media screen and (max-width: 600px){
And try it again

Extremely basic media query not working on mobile

This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}
#media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>
My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.
My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.
Am I going nuts?
Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:
<meta name="viewport" content="width=device-width, initial-scale=1.0">

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; }
}

#import media queries css issue

I am preparing my first responsive web layout.
I have prepared two css one is for normal mode and other one is for mobile mode.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)"
href="css/mobile.css" />
</head>
Desktop mode (CSS)
#face
{
background-image: url(../images/Face.png);
background-repeat: no-repeat;
height:155px;
}
mobile mode (CSS)
#face
{
display:none;
}
But when decrease my browser window to mobile mode still #face this is displaying.
Kindly suggest me what I am doing wrong
Thanks in advance.
M
max-device-width measures the width of the screen, not the width of the browser.
Change that to max-width.
#media (max-width: 600px) {
#face
{
display:none;
}
}
try this
Or you can use this
<link rel="stylesheet" media="(max-width: 800px)" href="mobile.css" />

CSS Font-size not working properly on mobile device

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%;
}