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 ?
Related
I'm trying to make different dimension of one modal.
If I resize in the Browser the change is what I want.
But, if I change the Chrome to simulate a mobile environment or if I open the code at my phone it doesn't work.
I the example I tried to make a mobile first approach. My dialog-content is white as default. Then I change to blue if the width is bigger than 750px and to black if is bigger than 1000px. I make other change too but the color is the important one in the examples.
I would like to know why my "default" case is not working for mobile.
The code can be found here.
Try adding viewport meta tag in the head of the document:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- ... -->
</body>
</html>
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.
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">
I want to make a user interface for a mobile application with HTML5/Bootstrap 3. I have this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Task Service</title>
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="stylesheet" href="css/bootstrap-3.1.0.min.css">
<link rel="stylesheet" href="css/bootstrap-theme-3.1.0.min.css">
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-muted">Angular/Bootstrap Tasks</h3>
</div>
<a class="btn btn-primary form-control">
Create
</a>
</div>
<script src="lib/bootstrap-3.1.0.min.js" type="text/javascript"></script>
</body>
</html>
The button is extremely small on my Windows Phone 8. It is about 1/4th the size of my finger.
How do I proceed making the appropriate size elements using bootstrap 3?
Ugh, this was a classical case of Microsoft incompetence.
Reference: http://timkadlec.com/2013/01/windows-phone-8-and-device-width/
This is an issue because using CSS device adaptation is necessary for
getting responsive sites to work in snap mode in IE10 for Metro. So
while CSS device adaptation fixes our issues with snap mode, it causes
issues on Windows Phone 8 devices like the Lumia.
My recommendation is to use Microsoft’s fix. Client-side UA sniffing
may not be the most eloquent solution, but I prefer it to potentially
harming the user experience—something which each of the other two
solutions would be guilty of. Perhaps this would be a different
scenario if this was IE8 or IE7, but considering it’s the behavior in
an operating system that just came out (and therefore, most likely
will only increase in marketshare for the time being) I think it’s
worth implementing.
Device width was not being applied, therefore screwing up the entire device display...
Try adding a class to your button. It should read like: <button class="btn btn-primary btn-lg">Create<button> rather than <a class="btn btn-primary form-control">Create</a>
Hope this helps.
You can override the default button size by adding btn-lg, btn-sm or btn-xs so it's the size you'd like it to be.
So use:
<a class="btn btn-primary btn-lg form-control">
Create
</a>
To use the larger size.
You could also override what's seen on each screen size by using the information here. So you could use the regular size button like you are for a regular screen and have a different size for mobile devices. You'd have your content on the page twice, but wrap it with the appropriate responsive tags to get what you want.
also could be used this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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