Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
When I view this site in Chrome and use dev tools to view mobile site it correctly shows as 1 column but when viewed from iPhone still 2 columns?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body class="h-full font-proza">
<div class="container mx-auto flex justify-center">
<div class="w-2/3">
<!-- Two columns -->
<div class="flex mb-4 flex-wrap md:flex-no-wrap">
<div class="w-full md:w-1/2 md:mr-10 mr-0">
Left Text
</div>
<div class="w-full md:w-1/2 mt-10 md:mt-0">
Some Text
</div>
</div>
</div>
</div>
</body>
</html>
Add the meta tag in your HTML.
A 'meta' viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Related
I am trying to migrate my old mvc app to bootstrap 4 and admitedly I have little experience with scss files.
Lets say I have a simple _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Source/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Source/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container body-content">
#RenderBody()
</div>
<script src="~/Source/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Source/Scripts/bootstrap.bundle.min.js"></script>
</body>
</html>
a View:
<div>
<div class="row">
<div class="col-md-2">
-OOO-
</div>
<div class="col-md-3">
-WWW-
</div>
<div class="col-md-7">
-KKK-
</div>
</div>
</div>
and a Controller with method:
public ActionResult Index() => View();
Bootstrap v4.3.1
JQuery v3.4.1
As soon as the View renders the weird situation happens, the '.col-md-2' class is rendered with wrong width values because '_grid-framework.scss' appear twice in the styles list and the wrong one has precedence:
My questions are:
Why browsers see two different files with the same path??
How do I make bootstrap generate only the correct version of the file?
I tried the regular things with clearing cache, clearing/recompiling, removing content from the IIS and rebooting the IIS.
// EDIT 1
Actually the comment about bootrap 4 dropping .col-sm-*, .col-md-*, etc confused me and it turns out it is not really the case (they even added xl tier). So the problem stands, I am currently overriding .col-md-2 styling in the .css file but I don't really want to do that.
I'm trying to set up a new internal web page using bootstrap (both versions 3.3.6 and 4.0.0-alpha.6) columns, but for some reason they don't show up in Internet Explorer 11 (company-mandated). Instead of columns, the text is stacked vertically (see examples).
I have tried everything from complex code to the simple code I have attached to this question. Nothing has worked. I have also looked at every single web page I could find on this, and likewise nothing has worked. I have also tried using xs, sm, md, lg and xl column sizes, and they don't make any difference.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<script src="js/bootstrap.min.js"></script>
<title>Test 4</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4">lg-4</div>
<div class="col-lg-4">lg-4</div>
</div>
<div class="row">
<div class="col-lg-3">lg-3</div>
<div class="col-lg-3">lg-3</div>
<div class="col-lg-3">lg-3</div>
</div>
<div class="container">
<div class="row">
<div class="col-3">variable</div>
<div class="col-3">variable</div>
<div class="col-3">variable</div>
</div>
</div>
The above code results in:
lg-4
lg-4
lg-3
lg-3
lg-3
variable
variable
variable
Instead of:
lg-4 lg-4 lg-3 lg-3 lg-3
variable variable variable
Bootstrap Grid System allows 12 columns across a page.
In order to avoid using all the 12 columns individually we can split the columns into sub columns as per our requirements.
However we need to ensure that the sub columns always sums up to 12 and never exceed 12 or else the content switches on to the next line.
So perform appropriate changes in your code as per the above concept and apart from that to support the grid system in IE 11 consider including the following tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
In order to have further knowledge about grid system visit the following link :
https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Boy, is my face red ...
I closed the browser, cleared the cache, and went back in ... and it worked fine.
Live and learn ... sorry for the wasted time ...
<div class="col-lg-12">
<div class="row">
<div class="col-lg-3">Column 1-a</div>
<div class="col-lg-3">Column 1-b</div>
<div class="col-lg-3">Column 1-b</div>
<div class="col-lg-3">Column 1-b</div>
</div>
</div>
My site is hosted at "nateshmbhat.github.io". I have used mdboostrp's row and col for my dom. But its not mobile friendly (shows lot of background space).
Site : https://nateshmbhat.github.io/ .
Its a static site.
How do i fix it ?
Site code : https://github.com/nateshmbhat/nateshmbhat.github.io
Add this tag to the head:
<meta name="viewport" content="width=device-width, initial-scale=1">
It looks like your cards use the class "m-5".
<div class="card m-5 hoverable projectCard" style="width: 22rem;">
If you want them to be responsive using boostrap the class is "col-md-5".
<div class="card col-md-5 hoverable projectCard">
Does it answer your question ?
This question already has answers here:
Is it necessary to write HEAD, BODY and HTML tags?
(6 answers)
Closed 4 years ago.
I have a code snippet which goes as follows:
<html>
<head>
<script></script>
<div class="container">
<div class="jumbotron">
<p>Hello I am Dikshit</p>
<ul><li class="">Hello</li>
<li> India</li>
</ul>
</div></div>
</head>
<body>
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Hello Lorem popum
<p> Demo text</p>
</body>
</html>
How does this even work? What is the difference between head and body tags?
Please find here the output attachment.
The head tag is supposed to be used for information for including resources/information for the browser/search engines, so stuff like CSS links and scripts and meta tags.
If you add a div or any other visible HTML element, most browsers will still show it, but it's not technically valid and is advised against -- just put visible content in the body.
The reason why it works is that the browser knows what you wanted to do. But you might have troubles when you host it in an external server.
Tags help you structure your page. If a robot crawls your web, it knows to look for tags that define your webpage in the head, and for the content that is defined in the body.
After struggling to get a Bootstrap responsive page to work in IE8, I've simplified it incredibly, creating a very basic page that should only display the size of the browser using the "visible" classes, but still cannot get the page to render properly in IE8. I've read where respond.js must be on the same subdomain as the CSS, and fixed that, but it still doesn't work. After much trial and error, reading through documentation (getbootstrap.com, responsejs.com, etc.), and reading some threads on stackoverflow, I thought I'd post my issue.
Here's the code, which is supposed to display the size of the browser, The page is hosted in a landing page, marketing automation program, called Eloqua, hence the strange and lengthy URLs for the CSS and JS files:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Bootstrap -->
<link href="http://images.response.test.com/Web/test/{08fa83ba-e64a-401e-a642-8bc74434d750}_bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://images.response.test.com/Web/test/{5cdf751f-5097-4163-a9f3-b03c33408410}_html5shiv.js"></script>
<script src="http://images.response.test-mail.com/Web/test/{7caa6bb7-1d4d-422e-bfaa-e4f4afdb8da1}_respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>IE8 Test</h1>
<p>The Bootstrap grid type should be displayed below: </p>
<div class="container">
<p class="visible-lg">Large grid is being displayed. The grid stacks horizontally < 1200px. </p>
<p class="visible-md">Medium grid is being displayed. The grid stacks horizontally < 992px. </p>
<p class="visible-sm">Small grid is being displayed. The grid stacks horizontally < 768px. </p>
<p class="visible-xs">Extra small grid is being displayed. This grid is always horizontal. </p>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://images.response.test-mail.com/Web/test/{08fa83ba-e64a-401e-a642-8bc74434d750}_bootstrap.min.css"></script>
<script src="http://images.response.test-mail.com/Web/test/{4f3edd38-e24f-4f56-8336-dbb33cc5567b}_css3-mediaqueries.js"></script>
</body>
</html>
Thanks for any help.
In the GetBootstrap.com docs it reads, essentially, that any css used by Respond.js must be a relative path from the root of the html document, so you can't use absolute paths in your css url OR you can set up a proxy as per the Respond.js documentation.
Respond.js works by requesting a pristine copy of your CSS via AJAX,
so if you host your stylesheets on a CDN (or a subdomain), you'll need
to upload a proxy page to enable cross-domain communication.
DOCS: https://github.com/scottjehl/Respond