Why don't these scale correctly on mobile browsers?
Question
Here's a link to my site. You'll be able to look at absolutely all of my code from there, but I have the code I believe is causing my problem below. dustindowell.com/blog
I'm in the process of designing this site with media queries for a responsive site when on a mobile browser, but I can't figure this out. It works fine on a desktop browser, but when I get on my phone, using Opera, Firefox, or Chrome, and look at the "sidebar" (the aside class="sidePost" under the main content post with the bubble image and my twitter username) it won't scale like the rest of the content does.
I have no idea why. I designed the entire site in ems and there's no pixels units to be seen. It's not an issue with aside, because I've tried switching it to div and I also have another aside on the page that scales perfectly fine. I'm really out of ideas.
EDIT: Just wanted to add that the footer isn't scaling either. The only thing I can think of is the Google font affecting the scaling somehow? I have google fonts elsewhere on the page, but they don't seem to be effected.
EDIT: One more thing. The text I'm talking about should all be visibly the same size. Even when I set the font-size:200% on the postSidebar or the footer, they still don't scale.
EDIT: Ruled out Google fonts causing the issue.
EDIT: With the exception of the calc property not being supported on the Android browser, it seems to work perfectly fine there.
EDIT: I've been working hard on trying to fix the problem, but nothing I do seems to make a difference. It's not the fact that it's an footer or an aside that's causing it not to scale. It's not the fact that It's in a paragraph tag. It's not the fact that it's inside #contentContainer, but outside #content divs. I'm totally lost, and I'm just about convinced that somehow the browser is somehow deciding what my content is and that that's the only thing that should be scaled up for the user to read and that things that are only a few words long, are not worth it's time to follow the rules I've set for all text to behave like.
I've also updated and addded more code to this question.
EDIT: I understand I'm editing this WAY to much. But I have another update. If I scale the text font-size:500%; the site will, proportionately, be correct, though, it's 500x to big. Still don't know why the proportion is off and it's driving me insane.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Dustin Dowell</title>
<link href='http://fonts.googleapis.com/css?family=Contrail+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<link href="css/faces.css" rel="stylesheet" type="text/css">
<link href="glider/featuredcontentglider.css" rel="stylesheet" type="text/css">
<!-- Media Query needs precedence over all stylesheets -->
<link href="css/mediaQuery.css" rel="stylesheet" type="text/css">
<link href="css/mediaQueryMobile.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="glider/featuredcontentglider.js">
// /***********************************************
// * Featured Content Glider script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
// * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
// * This notice must stay intact for legal use
// ***********************************************/
</script>
<!--
=================================================================
This site was created by Dustin Dowell, Copyright 2013
Do not copy, modify, or redistribute this design.
=================================================================
-->
</head>
<body>
<div id="displayPercentage">
<ul>
<li>Current Page Scaling: 75% <a href="">What is this?</a></li>
<li>Current Page Scaling: 100% <a href="">What is this?</a></li>
<li>Current Page Scaling: 125% <a href="">What is this?</a></li>
<li>Current Page Scaling: 150% <a href="">What is this?</a></li>
<li>Current Page Scaling: 175% <a href="">What is this?</a></li>
<li>Current Page Scaling: 200% <a href="">What is this?</a></li>
</ul>
</div>
<header>
<div id="headerContent">
<div id="logo"></div>
<div id="headline">
<h1 id="title">Life of Geek</h1>
<h2 id="tagline">Energy Drinks and Microwavable Food</h2>
</div>
<nav>
<a class="current" href="">News</a>
<a href="">Apps</a>
<a href="">Galleries</a>
<a href="">Cool Stuff</a>
</nav>
<div class="Clear"></div>
</div>
</header>
<div id="pageContainer">
<div id="slideShowContainer">
<script type="text/javascript">
featuredcontentglider.init({
gliderid: "glideContainer", //ID of main glider container
contentclass: "glideContent", //Shared CSS class name of each glider content
togglerid: "glideSelect", //ID of toggler container
remotecontent: "", //Get gliding contents from external file on server? "filename" or "" to disable
selected: 0, //Default selected content index (0=1st)
persiststate: false, //Remember last content shown within browser session (true/false)?
speed: 750, //Glide animation duration (in milliseconds)
direction: "rightleft", //set direction of glide: "updown", "downup", "leftright", or "rightleft"
autorotate: true, //Auto rotate contents (true/false)?
autorotateconfig: [6000, 200], //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
onChange: function(previndex, curindex, $allcontents){ // fires when Glider changes slides
//custom code here
}
})
</script>
<div id="glideSelect" class="glideContentToggler">
<a href="#" class="prev" id="togglerLeft"></a>
<a href="#" class="next" id="togglerRight"></a>
<div class="clear"></div>
</div>
<div id="glideContainer" class="glideContentWrapper">
<div class="glideContent">
<img src="images/glider/slide1.png" alt="">
</div>
<div class="glideContent">
<img src="images/glider/slide1.png" alt="">
</div>
<div class="glideContent">
<img src="images/glider/slide1.png" alt="">
</div>
</div>
</div>
<div id="contentContainer">
<section id="content">
<article class="post">
<h1>The title of this blog post.</h1>
<h2>Posted June 28, 2013</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m i n im veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad m i n im veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in v oluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<aside class="postSidebar">
<div class="authorImage">
<div class="dustinFace">
<div class="bubble"></div>
</div>
</div>
<div class="postSidebarText">
<p>Dustin Dowell</p>
<p>@dustindowell22</p>
</div>
<div class="clear"></div>
</aside>
<div class="clear"></div>
<article class="post">
<h1>The title of this blog post.</h1>
<h2>Posted June 28, 2013</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
<aside class="postSidebar">
<div class="authorImage">
<div class="dustinFace">
<div class="bubble"></div>
</div>
</div>
<div class="postSidebarText">
<p>Dustin Dowell</p>
<p>@dustindowell22</p>
</div>
<div class="clear"></div>
</aside>
<div class="clear"></div>
</section>
<aside id="sidebar">
<article class="sidePost">
<h1>Sidebar Title</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>
</aside>
<div class="clear"></div>
<footer>
<p>Copyright © 2013 Dustin Dowell</p>
</footer>
</div>
</div>
</body>
</html>
Mobile Media Query CSS:
@charset "UTF-8";
/* CSS Document */
/* ////////// Mobile Resolution ////////// */
/* 50px negative gap for good measure */
/* Portrain CSS */
@media only screen
and (orientation: portrait)
{
body{
min-width:48em; /* 768px */
font-size:125%;
}
#displayPercentage{
display:none;
}
/* Header */
header{
height:12em;
}
#headerContent{
width:inherit;
}
#headline{
font-size:75%;
margin-left:21.5em;
}
nav{
float:right;
}
/* Page */
#pageContainer{
width:100%;
}
/* SlideShow */
#slideShowContainer{ /* to complicated to fit in design accurately, also can run slow on some phones */
display:none;
}
/* Content */
#contentContainer{
width:calc(100% - 3em);
padding-top:1.5em; /* cancels out padding, padding should be applied to content and sidebar elments instead */
}
#content{
width:100%;
margin-right:0;
}
/* Post */
.post{
width:100%;
}
/* Post Sidebar */
.postSidebar{
width:100%;
margin-bottom:1.5em;
}
.authorImage{
font-size:50%;
float:left;
margin:0;
}
.postSidebarText{
margin-top:1em;
margin-left:6em;
}
.postSidebar p{
text-align:left;
}
/* Sidebar */
#sidebar{
width:100%;
margin-bottom:1.5em;
}
.sidePost{
width:100%;
margin:0;
}
/* Footer */
footer{
width:100%; /* redundant */
}
}
Regular Stylesheet CSS:
@charset "UTF-8";
/* CSS Document */
*{
margin:0;
padding:0;
}
body{
min-width:70em; /* largest width to prevent horizontal scrolling */
font-size:100%; /* keep in divisors of 25 or rounding will cause breaks, but never below 75% or webkit will break */
line-height:1.5em; /* line height for the entire page */
font-family: 'Crimson Text', serif;
background-image:url(../images/layout/bg.png);
background-size:.5em; /* 8 instead of 16 so it doesn't look blurry on retina */
}
.clear{
clear:both;
}
#displayPercentage{
height:1.5em;
margin-left:.25em;
position:absolute;
top:0;
overflow:hidden;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
color:rgba(191,191,191,1);
}
#displayPercentage a{
margin-left:1em;
}
/* ////////// Links ////////// */
a:link{
color:rgba(128,204,255,1);
text-decoration:none;
}
a:visited{
color:rgba(128,204,255,1);
}
a:hover{
color:rgba(128,204,255,1);
text-decoration:underline;
}
a:active{
color:rgba(128,204,255,1);
}
/* ////////// Header ////////// */
header{
height:12em;
margin-top:3em; /* margin at top of page */
background-image:-webkit-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
background-image: -moz-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
background-image: -o-linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
background-image: linear-gradient(rgba(51,51,51,1), rgba(26,26,26,1));
}
#headerContent{
width:64em; /* width of the content in the header so it can be centered */
margin:auto;
}
#logo{
width:15em; /* 240px */
height:15em; /* 240px */
margin-top:-1.5em; /* for overhang */
border-radius:15em;
position:absolute; /* prevents interference because of overhang */
z-index:2000;
background-image:url(../images/logo.svg);
background-size:contain;
}
#headline{
white-space:nowrap; /* prevents word wrap on small window sizes */
margin-left:16.25em; /* this is just what looks decent. no math here */
margin-top:3.25em; /* this is just what looks decent. no math here */
position:absolute; /* prevents messing with nav bar float right */
}
#title{ /* keep title short or it will break the design */
line-height:.8em; /* i don't know why this number works perfectly */
font-size:6em;
font-weight:normal;
font-family: 'Contrail One', sans-serif;
color:rgba(255,255,255,1);
}
#tagline{
line-height:1.5em;
font-size:1.5em;
font-weight:normal;
font-family: 'Contrail One', sans-serif;
color:rgba(255,255,255,1);
text-indent:.0625em;
}
/* ////////// Navigation ////////// */
nav{
height:3em;
margin-top:9em;
margin-right:1.5em;
float:right;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}
nav a{
display:block;
height:.8em; /* 1 / 1.25 */ /* prevents border from acting stupid */
margin-left:.8em;/* for spacing between links */ /* 1 / 1.25 */
padding-bottom:1.44em; /* 1.8 / 1.25 */
border-bottom:.16em solid rgba(0,0,0,0); /* .2 / 1.25 */
float:left;
font-size:1.25em; /* has to be defined here to prevent wonky changes elsewhere */
text-transform:uppercase;
text-decoration:none;
}
nav a.current{ /* a class applied to the link of the current page */
border-color:rgba(255,255,255,1);
}
nav a:link{
color:rgba(255,255,255,1);
text-decoration:none; /* cancles out normal link style */
}
nav a:visited{
color:rgba(255,255,255,1);
}
nav a:hover{
color:rgba(128,204,255,1);
border-color:rgba(128,204,255,1);
}
nav a:active{
color:rgba(128,204,255,1);
}
/* ////////// Page ////////// */
#pageContainer{
width:64em;
margin:auto;
}
/* ////////// Content ////////// */
#contentContainer{
width:61em;
padding:1.5em;
background-color:rgba(255,255,255,1);
box-shadow:inset 0 -1px 0 1px rgba(0,0,0,.1);
}
#content{
width:43.5em;
margin-right:1.5em;
float:left;
}
/* ////////// Post ////////// */
.post{
width:32em;
margin-bottom:1.5em;
float:right;
}
.post h1{
font-size:2em;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}
.post h2{
margin-left:0.125em; /* for aligning with title better */
font-size:1em;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
color:rgba(191,191,191,1); /* gray */
}
.post h3, .post h4, .post h5, .post h6{
font-size:1em;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
color:rgba(191,191,191,1); /* gray */
}
.post p{
text-indent:1em;
}
/* ////////// Post Sidebar ////////// */
.postSidebar{
width:10em;
float:left;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}
.postSidebar p{
text-align:center;
color:rgba(191,191,191,1);
}
/* ////////// Sidebar ////////// */
#sidebar{
float:right;
width:16em;
}
.sidePost{
margin-bottom:1.5em;
}
.sidePost h1, .sidePost h2, .sidePost h3, .sidePost h4, .sidePost h5, .sidePost h6{
font-size:1em;
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
}
.sidePost p{
text-indent:1em;
}
/* ////////// Footer ////////// */
footer p{
font-weight:normal;
font-family:'Yanone Kaffeesatz', Arial, Helvetica, sans-serif;
text-align:center;
}
1 answers
solution1
0 ACCPTED
After a lot of thinking and searching:
...phew.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make my text and buttons automatically scale correctly on mobile (or why isn't it already)
Fixed scale elements on mobile browsers
divs don't consume the full width in mobile browsers
My site doesn't show correctly in mobile browsers
Why don't these list items position correctly?
Why don't images load on mobile?
SVG images know their aspect ratio; why don't browsers respect it?
Why use Modernizr if browsers ignore CSS they don't understand?
Why don't the modern browsers support PUT and DELETE form methods?
Why the Alegreya font doesn't display correctly in some browsers?
Related Tags