#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2017
    Posts
    1
    Rep Power
    0

    viewport meta tag isn't working


    Hey fellow devs,

    Is any of you willing to review my HTML ? I'm making my website responsive. Bootstrap and viewport meta tag both implemented but it isn't working.

    When I view the website on my phone, on which the size of the screen is same as iPhone 6, all I get is zoomed out full-size website. All the features that are available in mobile-mode aren't triggered.

    When I resize browser on my desktop to the size of phone's screen it all works nicely. But not on the phone.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
    	
    	<title>Carlos Martinez's Official website</title>
    	<meta charset="UTF-8">
    	<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
    	<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
    	<link href="https://fonts.googleapis.com/css?family=Bahiana|Gloria+Hallelujah" rel="stylesheet">
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    	<meta name="viewport" content="width=device-width, initial-scale=1" >
    <style>
    body {
    	padding-top: 40px;
    	background-color: #002266;
    }
    * {
    	padding: 0;
    	margin: 0;
    }
    li {
    	font-family: 'Bahiana', Verdana;
    	font-size: 40px;
    	
    }
    #paragraph {
    	font-family: 'Gloria Hallelujah', Verdana;
    	font-size: 38px;
    	color: #00e6e6;
    }
    html {
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	
    }
    h3 {
    	font-family: 'orbitron', sans-serif;
    	font-size: 45px;
    	color: #0066ff;
    	font-weight: bold;
    	margin-bottom: 50px;
    }
    
    span {
    	text-shadow: 2px 2px red;
    	font-size: 60px;
    	color: #0066ff;
    }
    p {
    	font-family: 'Gloria Hallelujah', sans-serif;
    	font-size: 25px;
    }
    img {
    	
    	border: 15px inset navy;
    	border-radius: 10px;
    }
    .jumbotron {
    	background-color: transparent;
    }
    
    .footer {
    	text-align: center;
    }
    .footer ul li {
    	display: inline-block;
    	list-style-type: none;
    	padding-right: 10px;
    
    }
    #underdevelopment {
    	width: 40px;
    	height: auto;
    	border: none;
    
    }
    .footer p {
    	color: red;
    }
    #hover a:hover {
    	color: #3333ff;
    }
    #highlight {
    	color: #6699ff;
    }
    @media only screen and (max-width: 600px) {
    	
    img {
    		width: 80%;
    		border: 3px outset blue;
    		height: auto;
    }
    
    
    }
    
    
    
    </style>
    </head>
    <body>
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
    <div class="container">
    <div class="header">
    	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    	<span class="icon-bar"></span>
    	<span class="icon-bar"></span>
    	<span class="icon-bar"></span>
    	</button>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav" id="hover">
    	<li><a href="index.php" id="highlight">home</a></li>
    	<li><a href="about.html">about me</a></li>
    	<li><a href="my_work.html">my work</a></li>
    	<li><a href="upcoming.php">upcoming events</a></li>
    	<li><a href="contact.html">contact me</a></li>
    </ul>
    </div>
    </div>
    </nav>
    <div class="jumbotron">
    	<div class="container text-center">
    	
    		<h3>Welcome to <span>Carlos Martinez</span>'s website</h3>
    		<div class="row">
    		<div class="col-lg-6">
    		<img src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/15965068_10154858290396354_1983436181302302499_n.jpg?oh=1774b17347d21394afb4d304ccafbb5e&oe=59465625" width="400" height="auto" /></div>
    		<div class="col-lg-6">
    		<p id="paragraph">Music is my lifestyle, music is in my blood, hope you enjoy the content and feel free leave a comment in the "upcoming events" section</p>
    		</div>
    	</div>
    </div>
    </div>
    <div class="container">
    <div class="footer">
    	<ul>
    		<li><img src="css/pics/underdevelopment.png" id="underdevelopment"></li>
    		<li><p>This website is under development</p></li>
    	</ul>
    </div>
    
    <!-- Start of StatCounter Code for Default Guide -->
    <script type="text/javascript">
    var sc_project=11273342;
    var sc_invisible=1;
    var sc_security="e1a20e80";
    var scJsHost = (("https:" == document.location.protocol) ?
    "https://secure." : "http://www.");
    document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+
    "statcounter.com/counter/counter.js'></"+"script>");
    </script>
    <noscript><div class="statcounter"><a title="site stats"
    href="http://statcounter.com/" target="_blank"><img class="statcounter"
    src="//c.statcounter.com/11273342/0/e1a20e80/1/" alt="site
    stats"></a></div></noscript>
    <!-- End of StatCounter Code for Default Guide -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Posts
    11
    Rep Power
    0

    Give this a try


    I cleaned up the html a bit... you had an extra div that was making the body think it wasn't closed as well as a few other small things. It appears to respond okay when I test now. Hope that helps get you started.

    Matt


    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    	
    	<title>Carlos Martinez's Official website</title>
    	
    	<meta charset="UTF-8">
    	
    	<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
    	<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
    	<link href="https://fonts.googleapis.com/css?family=Bahiana|Gloria+Hallelujah" rel="stylesheet">
    	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    	
    	<meta name="viewport" content="width=device-width, initial-scale=1" >
    	
    	<style>
    	
    		body {
    			padding-top: 40px;
    			background-color: #002266;
    		}
    
    		* {
    			padding: 0;
    			margin: 0;
    		}
    
    		li {
    			font-family: 'Bahiana', Verdana;
    			font-size: 40px;
    
    		}
    
    		#paragraph {
    			font-family: 'Gloria Hallelujah', Verdana;
    			font-size: 38px;
    			color: #00e6e6;
    		}
    
    		html {
    
    			-webkit-background-size: cover;
    			-moz-background-size: cover;
    			-o-background-size: cover;
    			background-size: cover;
    
    		}
    
    		h3 {
    			font-family: 'orbitron', sans-serif;
    			font-size: 45px;
    			color: #0066ff;
    			font-weight: bold;
    			margin-bottom: 50px;
    		}
    
    		span {
    			text-shadow: 2px 2px red;
    			font-size: 60px;
    			color: #0066ff;
    		}
    
    		p {
    			font-family: 'Gloria Hallelujah', sans-serif;
    			font-size: 25px;
    		}
    
    		img {
    
    			border: 15px inset navy;
    			border-radius: 10px;
    		}
    
    		.jumbotron {
    			background-color: transparent;
    		}
    
    		.footer {
    			text-align: center;
    		}
    
    		.footer ul li {
    			display: inline-block;
    			list-style-type: none;
    			padding-right: 10px;
    
    		}
    
    		#underdevelopment {
    			width: 40px;
    			height: auto;
    			border: none;
    
    		}
    
    		.footer p {
    			color: red;
    		}
    
    		#hover a:hover {
    			color: #3333ff;
    		}
    
    		#highlight {
    			color: #6699ff;
    		}
    
    		@media only screen and (max-width: 600px) {
    
    		img {
    			width: 80%;
    			border: 3px outset blue;
    			height: auto;
    		}
    
    
    		}
    
    </style>
    
    </head>
    
    <body>
    
    <nav class="navbar navbar-inverse navbar-fixed-top" id="my-navbar">
    
    	<div class="container">
    	
    		<div class="header">
    		
    			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    				<span class="icon-bar"></span>
    			</button>
    			
    		</div>
    	
    		<div class="collapse navbar-collapse" id="navbar-collapse">
    		
    			<ul class="nav navbar-nav" id="hover">
    			
    				<li><a href="index.php" id="highlight">home</a></li>
    				<li><a href="about.html">about me</a></li>
    				<li><a href="my_work.html">my work</a></li>
    				<li><a href="upcoming.php">upcoming events</a></li>
    				<li><a href="contact.html">contact me</a></li>
    				
    			</ul>
    			
    		</div>
    	
    	</div>
    	
    </nav>
    
    <div class="jumbotron">
    
    	<div class="container text-center">
    	
    		<h3>Welcome to <span>Carlos Martinez</span>'s website</h3>
    		
    		<div class="row">
    		
    			<div class="col-lg-6">
    				<img src="https://scontent.flhr3-2.fna.fbcdn.net/v/t1.0-9/15965068_10154858290396354_1983436181302302499_n.jpg?oh=1774b17347d21394afb4d304ccafbb5e&oe=59465625" width="400" height="auto" />
    			</div>
    
    			<div class="col-lg-6">
    				<p id="paragraph">Music is my lifestyle, music is in my blood, hope you enjoy the content and feel free leave a comment in the "upcoming events" section</p>
    			</div>
    		
    		</div>
    	
    	</div>
    	
    </div>
    
    <div class="footer">
    
    	<ul>
    		<li><img src="css/pics/underdevelopment.png" id="underdevelopment"></li>
    		<li><p>This website is under development</p></li>
    	</ul>
    
    </div>
    
    <!-- Start of StatCounter Code for Default Guide -->
    <script type="text/javascript">
    	var sc_project=11273342;
    	var sc_invisible=1;
    	var sc_security="e1a20e80";
    	var scJsHost = (("https:" == document.location.protocol) ?
    	"https://secure." : "http://www.");
    	document.write("<sc"+"ript type='text/javascript' src='" + scJsHost+
    	"statcounter.com/counter/counter.js'></"+"script>");
    </script>
    
    <noscript>
    
    	<div class="statcounter">
    		<a title="site stats" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/11273342/0/e1a20e80/1/" alt="site stats"></a>
    	</div>
    	
    </noscript>
    <!-- End of StatCounter Code for Default Guide -->
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    </body>
    </html>
  4. #3
  5. Code Monkey V. 0.9
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Mar 2005
    Location
    A Land Down Under
    Posts
    2,270
    Rep Power
    2039
    You don't need to set the initial-width value. That's what "breaking" site site on phones.

    This will do the right thing for you.

    Code:
    <meta name="viewport" content="width=device-width">
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2017
    Posts
    11
    Rep Power
    0
    All of the bootstrap examples actually start with an initial scale and they respond fine on a mobile device.

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1">
    The initial-scale value merely helps properly display the page on devices when you change view orientation.

IMN logo majestic logo threadwatch logo seochat tools logo