Jump to content

W3.CSS and mobile devices


sawozny2

Recommended Posts

I'm using w3.css with my own custom styles and during development all the responsive small / medium / large / mobile stuff works great as I resize the browser on my desktop copy of Firefox (using whatismyviewport.com to confirm the display size in DIPs), but when I load the page on my phone, even though whatismyviewport.com shows the viewport size in device independent pixels (360px wide), the page shows in "medium" format (~900px wide based upon size of window vs fixed size elements in the page) but if it was using raw pixels it should show in "large" format as the device's display is 1440 px wide.  Just to eliminate my specific device as a potential issue, I loaded the page in desktop Firefox and in the developer tools, I changed the device to Galaxy S9 (DIP 360x740) and it also (incorrectly) loads like it was on a "medium" device.

So my question is if there's any known issues with w3.css sites displaying properly on mobile phones (i.e. causing the "correct" device independent pixels values to be used) and, if so, is there anything I can do to fix my site.  This forum, for example, displays exactly as it should on both browser and phone so it has to be possible.  I'm just trying to figure out what I'm missing.

Here is the HTML and my custom style sheet.  Any suggestions what I can do to get this site to render properly on mobile browsers?

Thanks,

Scott

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> 
        <link rel="stylesheet" href="styles/my-styles.css">
	<title>Login Page</title>
	<meta name="description" content="Enter your credentials to access your data.">

</head>
<body>
<!-- Large and medium display, sticky NavBar -->
<div class="w3-top w3-hide-small"> <!-- Separate container for reasons I don't fully understand. -->
<div class="w3-bar w3-black my-text-light-spring-green">
	<a href="/" class="w3-bar-item w3-button  ">Home</a>
	<a href="/points" class="w3-bar-item w3-button  ">Points</a>
	<a href="/buy" class="w3-bar-item w3-button  ">Buy</a>
	<a href="/codes" class="w3-bar-item w3-button w3-hide-medium  ">Codes</a>
	<a href="/transaction-history" class="w3-bar-item w3-button w3-hide-medium  ">Transaction History</a>
	<div class="w3-dropdown-hover w3-hide-large">
		<span class="w3-button">&bull;&bull;&bull;</span>
		<div class="w3-dropdown-content w3-bar-block w3-card w3-black 
			my-text-light-spring-green">
			<a href="/codes" class="w3-bar-item w3-button  ">Codes</a>
			<a href="/transaction-history" class="w3-bar-item w3-button  ">Transaction History</a>
		</div>
	</div>
	<div class="w3-right">
		<a href="/profile" class="w3-bar-item w3-button  "
			>Profile</a>
			<a href="/login" class="w3-bar-item w3-button  my-light-spring-green w3-text-black ">Login</a>
		</div>
</div>
</div>

<!-- Large and medium non-sticky welcome bar -->
<div class="w3-bar w3-black my-text-light-spring-green w3-hide-small" style="padding-top:4px">
	<span class="w3-bar-item w3-right">Welcome, 
		Guest!</span>
</div>

<!-- Small display, disappearing NavBar -->
<div id="smallnavbar" class="w3-top w3-hide-large w3-hide-medium" style="transition:top 0.3s">
<div class="w3-bar w3-black my-text-light-spring-green">
	<span class="w3-dropdown-click w3-button w3-left" onclick="showDropdown()">&#9776;</span>
		<div id="smallDropdown" style="z-index:-1" class="w3-dropdown-content w3-bar-block 
			w3-card w3-black my-text-light-spring-green">
			<div><br><br></div>
			<span class="w3-bar-item">Welcome, Guest!</span>
			<a href="/" class="w3-bar-item w3-button 				">Home</a>
			<a href="/points" class="w3-bar-item w3-button  ">Points</a>
			<a href="/buy" class="w3-bar-item w3-button  
				">Buy</a>
			<a href="/codes" class="w3-bar-item w3-button  ">Codes</a>
			<a href="/transaction-history" class="w3-bar-item w3-button  ">Transaction History</a>
			<a href="/profile" class="w3-bar-item w3-button  ">Profile</a>
		</div>
	<a href="/login" class="w3-bar-item w3-button w3-right  my-light-spring-green w3-text-black ">Login</a>
</div>
</div>

<script>
function showDropdown() {
	var x = document.getElementById("smallDropdown");
	if (x.className.indexOf("w3-show") == -1 ) {
		x.className += " w3-show";
	} else {
		x.className = x.className.replace(" w3-show", "");
	}
}
</script>

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
	var currentScrollPos = window.pageYOffset;
	if (prevScrollpos > currentScrollPos) {
		document.getElementById("smallnavbar").style.top = "0";
	} else {
		document.getElementById("smallnavbar").style.top = "-40px";
	}
	prevScrollpos = currentScrollPos;
}
</script>
<div class="my-600px-centered w3-card-4 w3-mobile">
	<h1 class="w3-container my-spring-green">Log In</h1>
	<p>Enter your username and password.  Both fields are required.</p>
	<p><span class="my-error"></span></p>
	<form class="w3-container" method="POST" action="">
		<input id="redirectTo" name="redirectTo" type="hidden" 
			value="/">
		<div>
			<label for="userEmail">Email Address</label>
			<input required type="email" id="userEmail" name="userEmail" 
				class="w3-input w3-border"
				value="" 
				placeholder="user@example.com">
			<span class="my-error"></span>
		</div>
		<div>
			<label for="password">Password</label>
			<input required type="password" id="password" name="password" 
				class="w3-input w3-border"
				value="" 
				placeholder="Enter your password here" minlength="8" >
			<span class="my-error"></span>
		</div>
		<div>
			<input type="submit" value="Submit">
			<input type="checkbox" id="rememberMe" name="rememberMe"
				 >
			<label for="rememberMe">Keep Me Logged In</label>
		</div>
	</form>
	<div class="w3-container my-dark-spring-green">
	        <p>Need an account?  <a href="register">Register here.</a></p>
	        <p>Forgot your password?  <a href="password-reset">Reset it here.</a></p>
	</div>
</div>
</body>
</html>

And the CSS...

/* Custom styles for my site */
body{padding-top:27px} /* So the nav bar doesn't cover the first line of text */
.my-600px-centered{width:600px;margin-left:auto;margin-right:auto}
.my-error{color:red;background-color:white}
.my-spring-green,.my-hover-spring-green:hover{color:#000!important;background-color:#00ff80!important}
.my-light-spring-green,.my-hover-light-spring-green:hover{color:#000!important;background-color:#80ffc0!important}
.my-dark-spring-green,.my-hover-dark-spring-green:hover{color:#fff!important;background-color:#008040!important}
.my-text-spring-green,.my-hover-text-spring-green:hover{color:#00ff80!important}
.my-text-light-spring-green,.my-hover-text-light-spring-green:hover{color:#80ffc0!important}
.my-text-dark-spring-green,.my-hover-text-dark-spring-green:hover{color:#008040!important}
.my-border-spring-green,.my-hover-border-spring-green:hover{border-color:#00ff80!important}
.my-border-light-spring-green,.my-hover-border-light-spring-green:hover{border-color:#80ffc0!important}
.my-border-dark-spring-green,.my-hover-border-dark-spring-green:hover{border-color:#008040!important}

 

Link to comment
Share on other sites

FFS...  I forgot to include

<meta name="viewport" content="width=device-width, initial-scale=1">

in the header of the page that was giving me trouble.  I couldn't figure out why some pages worked in mobile and some didn't until I started doing a line by line comparison and found this.  Sorry for the bother.  If anyone comes across this in the future where it all looks great on a desktop browser at various page sizes, but doesn't render right in mobile, make sure you set your viewport. 😀😀😀

Scott

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...