I'm using Bootstrap 3.0 panels and trying to figure out why a page is not responsive on mobile devices. It displays properly on a desktop browser, but doesn't view optimized on mobile devices.
The panel examples on the Bootstrap site do indeed display optimized on mobile.
Am I missing something?
Here's the html:
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<title>a title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<div class="media">
<div class="media-body">
<div class="row-fluid">
<div class="row">
<div class="col-md-12"><h1 class="media-heading">This is a heading using h1s.</h1></div>
</div>
</div>
<br>
<div class="row-fluid">
<div class="span4 top-buffer">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
Looks like you're missing a viewport tag in the head of your HTML. Docs
Like this:
<meta content='maximum-scale=1.0, initial-scale=1.0, width=device-width' name='viewport'>
Except it could be argued that disabling zoom is a bad idea if your text is too small to read, so take care to test it on a variety of devices with different users in mind.
Related
recently, I have downloaded videos from youtube on learning bootstrap 4 for responsive web design and everything works fine for me when I use
<div class="col-md-6> the md class for the medium screen and lg class for large screen works fine but xl class for the extra small devices and sm class for small devices no matter how I zoom the page and I have downloaded responsive website test extension for chrome but still nothing. this is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn BOOTSTRAP CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
# this is the parent class and it should take the entire page width
<div class="col-lg-6 col-md-6 col-sm-12 bg-primary">
<p>this is the primary color</p>
<div class="row">
# and this is the child class and it should take 6 col of it parent class
<div class="col-lg-6 col-md-6 col-sm-6 bg-success">
<p>this is the success color</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
look like I didn't work because I was using Bootstrap 4, when I used bootstrap
3 the code works fine for me
I'm reworking an existing module to make it more adaptive. Below is a general mock-up of the current design. This design is used for multiple things, and the goal is that adding or removing modules should be easy.
Right now, we're using a HTML <table> to achieve the lay-out, using col-span and row-span everywhere, but that becomes very messy, very fast (especially if we want to remove a module, or add another module of a different size).
What would a proper way to work around this, be? I'm not looking after a full solution, I'd rather have a small example that I can extend on.
I tried Bootstrap, but some of the modules have fixed sizes, which messes up the GRID-design of Bootstrap. Float has issues with the vertical stacking, ...
Code snippet of how it's created right now:
<table>
<tbody>
<tr>
<td colspan="4" rowspan="2">module</td>
<td>module</td>
<td colspan="3" rowspan="2">module</td>
</tr>
<tr><td>module</td></tr>
</tbody>
</table>
Customize grid according to your needs
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<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>
</head>
<body>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<div class="row">
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
<div class="col-sm-6" style="background-color:lavenderblush;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:black;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:green;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:blue;">.col-sm-3</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:red;">.col-sm-6</div>
<div class="col-sm-3" style="background-color:pink;">.col-sm-3</div>
<div class="col-sm-3" style="background-color:yellow;">.col-sm-3</div>
</div>
</div>
</body>
</html>
I'm using the Bulma CSS Framework and I simply cannot get my site to be as responsive as their homepage.
The site is live. My < html > has the same font-size, and my dom structure is identical to bulma's main page. Yet mine looks awful on mobile.
Here's a snippet of my HTML page:
<html>
<body>
<section class="hero">
<div class="hero-body has-text-centered">
<div class="container">
<div>
<h1 class="title">Tiny Text!</h1>
</div>
</div>
</div>
</section>
</body>
</html>
<html class="route-index">
<body class="layout-default" style="zoom: 1;">
<section class="hero is-medium">
<div class="hero-body has-text-centered">
<div class="container">
<h1 class="title">Somehow big text?</h1>
</div>
</div>
</section>
</body>
</html>
Bulma's page:
My page:
You can test this through developer tools on chrome setting the viewport to mobile on both sites' main pages.
try adding this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to fit the page to the mobile screen, otherwise it gives you a 'desktop site' which is wider
I seem to be having some strange issues with IE 11. Nothing is contained like it is in Chrome and everything is overflowing like crazy.Everything looks fine in Chrome and Safari and any mobile browser, but IE11 is struggling.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Forward | Reimagining adn.com</title>
<meta name="description" content="Reimagining adn.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/main.css">
</head>
<body ng-app"myApp" ng-cloak>
<div ng-view=""></div>
<body>
</html>
And here is a snippet of one of my routes:
<div class="section-b">
<div class="container-fluid">
<div class="row vertical-align">
<div class="col-lg-3 col-lg-push-8 col-sm-12"><img alt="Alaska"
class="img-responsive intro-img" src=
"images/introduction_a.jpg"></div>
<div class="col-lg-6 col-lg-offset-1 col-lg-pull-3 col-sm-12">
<div class="clearfix"></div>
<p class="lead">Some text will go here</p>
</div>
</div>
</div>
</div>
In the screenshot below the white area is the text-area and that's an img-responsive, the default width of the page is meant to be the same size as the last image as it's set to 100%. Any suggestions? I'm hoping it's something really simple.
Here is my bootstrap HTML code snippet. It is working fine in all browsers except in IE-11 . I am getting a horizontal scrollbar also the last 2 div col-xs-6 inside a row are coming in 2 different rows not in a single row.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="javascript/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="background-color:yellow;">
<div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
</div>
</div>
<div class="container">
<div class="row" style="background-color:yellow;"> direct inside a row
</div>
</div>
<div class="container">
<div class="row" style="background-color:yellow;">
<div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
<div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
</div>
</div>
</body>
</html>
Thanks for the help in advance.
You can try to specify the compatibility mode in the document header with:
<meta http-equiv="X-UA-Compatible" content="IE=11" />
Take a look to this link for more info:
IE legacy document modes