responsive design not working chrome dev tool but browser does

html google-chrome responsive-design google-chrome-devtools

10,937

Solution 1

Add viewport meta to your head tag

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

VIEWPORT

The viewport is the user's visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

The responsive design using chrome dev tool. But that is not working

CNTRL + F5 ( Force refresh the webpage ) and then check it.

Solution 2

You'll likely need to add viewport meta to your head.

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

10,937

Author by

siddiq

Updated on June 15, 2022

Comments

siddiq almost 2 years

I tried to check the responsive design using chrome dev tool. But that is not working.

Whereas the same works fine when i resize the browser.

I could not identify what might be the issue? Could someone help me identify the issue?

Code is below

<html>
	<head>
		<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/styles.css" />
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
		<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>		
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
		
	</head>
	<body>
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-8 col-md-8 hidden-sm-down" style="background-color:#4E5B5C; color:#fff"><span><small>Heading heading heading 1</small></span></div>
				<div class="col-lg-2 col-md-2 hidden-sm-down" style="background-color:#626F70; color:#fff"><span>Heading 2</span></div>
				<div class="col-lg-2 col-md-2 hidden-sm-down" style="background-color:#475859; color:#fff"><span>Heading 3</span></div>
			</div>
			<div class="row" style="background-color: #2B3536;">
				<div class="col-lg-2 col-md-2 col-sm-2 col-2 logo-div align-self-center"><img class="img-fluid" src="https://dummyimage.com/127x50/2b3536/fff"></div>
				<div class="col-lg-7 col-md-8 col-sm-8 col-8">
					<nav class="navbar navbar-wrapper navbar-fixed-top navbar-toggleable-sm navbar-expand-sm">
						<div class="container">
						  <a href="#" class="hidden-md-up mr-3" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false">
							<i class="fa fa-bars fa-lg text-white"></i>
						  </a>
						  <!--<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						  </button>-->
						  <div class="collapse navbar-collapse pl-sm-2" id="navbarNavDropdown">
							<ul class="navbar-nav header-nav">
							  <li class="nav-item">
								<a class="nav-link" href="#">Header menu item 1</a>
							  </li>
							  <li class="nav-item">
								<a class="nav-link" href="#">Header menu item 2</a>
							  </li>
							  <li class="nav-item">
								<a class="nav-link" href="#">Header menu item 3</a>
							  </li>
							  <li class="nav-item">
								<a class="nav-link" href="#">Header menu item 4</a>
							  </li>
							  <li class="nav-item">
								<a class="nav-link" href="#">Header menu item 5</a>
							  </li>
							  <li class="nav-item">
								<a class="nav-link" href="#">Header menu item 6</a>
							  </li>
							  <!--<li class="nav-item dropdown">
								<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
								  Dropdown link
								</a>
								<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
								  <a class="dropdown-item" href="#">Action</a>
								  <a class="dropdown-item" href="#">Another action</a>
								  <a class="dropdown-item" href="#">Something else here</a>
								</div>
							  </li>-->
							</ul>
						  </div>
						</div>
					</nav>
				</div>
				<div class="col-lg-3 col-md-2 col-sm-2 col-2 align-self-center">
					<div class="input-group">
					  <input class="form-control hidden-md-down"
							 placeholder="I'm looking for">
					  <div class="input-group-addon top-search-addon"><i class="fa fa-search fa-search-white"></i></div>
					</div>
				</div>
			</div>
			<div class="row">
				<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
				  <div class="carousel-inner" role="listbox">
					<div class="carousel-item active">
					  <img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="First slide">
					  <!--<div class="carousel-caption d-none d-md-block">
						<h3>...</h3>
						<p>...</p>
					  </div>-->
					</div>
					<div class="carousel-item">
					  <img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="Second slide">
					</div>
					<div class="carousel-item">
					  <img class="d-block img-fluid" src="https://dummyimage.com/1290x672/ccc/000" alt="Third slide">
					</div>
				  </div>
				  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
					<span class="carousel-control-prev-icon" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				  </a>
				  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
					<span class="carousel-control-next-icon" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				  </a>
				</div>
			</div>
		</div>
		
	</body>
</html>

Screenshots are below.

Checking in Galaxy s5

Checking by resize the screen

ctrl-alt-delor over 2 years

So is grid view ignored without this tag? What is that about, no other css needs enabling with an HTML tag. This seems to break the dependency rule. What am I missing, in understanding this?
ctrl-alt-delor over 2 years

So is grid view ignored without this tag? What is that about, no other css needs enabling with an HTML tag. This seems to break the dependency rule. What am I missing, in understanding this?