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">
Related
Why sm responsive utility in tailwindcss is showing the opposite output. I believed that using sm is to do something in small devices and smaller devices, however, the sm only applied in medium devices.
Any idea?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="hidden md:block">
Your device is medium/large [hidden md:block].
</h1>
<p class="md:hidden">
Your device is small [md:hidden].
</p>
<h3 class="sm:block hidden">
Your device is small too [sm:block hidden].
</h3>
</body>
</html>
CodeSandbox.
In tailwind you should first target mobile devices (like always recommended, since most of clients use mobile).
So general style like bg-red-500 would apply to every screen size, and the media queries (e.g sm), would apply to every screen which is larger than the specified screen size.
<script src="https://cdn.tailwindcss.com"></script>
<pre class="text-red-500 sm:text-blue-500">
What it looks like: This text is red on smaller than 640px screen widths (mobile) and blue on others.
The exact definition: This text is red on all devices but blue on bigger than 640px screen widths) </pre>
Source:
Mobile First By default, Tailwind uses a mobile first breakpoint
system, similar to what you might be used to in other frameworks like
Bootstrap.
What this means is that unprefixed utilities (like uppercase) take
effect on all screen sizes, while prefixed utilities (like
md:uppercase) only take effect at the specified breakpoint and above.
https://tailwindcss.com/docs/responsive-design
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>
The site look perfect when viewed from desktop But when I tried to access in mobile , it doesn't show navbar and background image and only load html content and columns . Any suggestion how to fix it.
It will be hard to find a perfect answer without any code or details but one of the things you can do is to add Bootstrap to the website
So what is Bootstrap ?
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS but its biggest advantadge is that it comes with responsive elements so you don't have to worry about how it will look on other devices since the Bootsrap elements are already responsive.
One of the easiest way to do it is to add the following code in your code in your "head" section :
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
Now all you need to do is to put your elements (for example your navbar) into Bootstrap classes (and if needed personalize them) so that it comes out properly on all devices
As for how to actually use the bootstrap elements and personalize them here is some documentation :
https://www.w3schools.com/bootstrap4/default.asp
https://getbootstrap.com/docs/4.3/getting-started/introduction/
I hope this help and if not then feel free to give more details about your issue so that I can try to give you a better answer :)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width"> <!--Supporting All devices width-->
<meta name="description" content="Lowa State University Library">
<meta name="keywords" content="For a Web Design Assignment">
<meta name="author" content="Tharuka Dananjaya">
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
</head>
<body>
<header>
<div class="container">
<div id="head_top">
<h1>LOWA STATE UNIVERSITY | <span class="highlight"> LIBRARY</span></a></h1>
</div>
<nav>
<ul>
<li>
<li class="current">Home</li>
<div class="dropdown">
<button class="button_book">Books</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
Link 4
Link 5
</div>
</div>
<!--Login
Register-->
Student Info
</ul>
</nav>
</header>
<section id="search_bar">
<div class="container">
<form>
<input type="text" placeholder="Search">
<button type="search" class="button_1">search</button>
`I have external CSS file and Bootstrap. i already link my CSS style in my page and it's work perfect. so I'm try create a table using bootstrap. but after linking bootstrap files in page change every styles. ex. header fonts, everything. So how do i link both Styles and i need both styles.After Linking Bootstrap file
Please first add bootstrap style and then your style.css.
Like
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
in your index.html file in the head section.
The priority of css works from bottom to top.
If you're importing your custom styles BEFORE Bootstrap; as soon as you import bootstrap it will override the classes you may have created in your CSS file.
Try importing bootstrap before your own CSS and see if that makes a difference.
Without any code it's all I can help you at this moment.
Edit
<link rel="stylesheet" href="./css/style.css">
<!--<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">-->
As I can see you were indeed importing bootstrap after your own CSS rules. That way Bootstrap is going to override your classes in your CSS files. To get around this flip the order of these two statements so your CSS has prevalence over what Bootstrap states.
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="./css/style.css">
Also, if you're not providing any font-family attributes in your CSS it's going to use Bootstrap's default. Don't forget to override all necessary classes AND elements (body, p, div...).
Further info on how to apply theming in your own Bootstrap instance can be found here, in the official Bootstrap docs.
Extra tip while debugging: Check in the developer environment you're not getting any 404 in the network requests regarding your links to your own stylesheets since it feels like your styles are not working but actually they are never reaching the browser
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/style.css">
Compiler tends to read code from line 1. If you put bootstrap.css after the style.css. Definitely bootstrap.css will overwrite style.css.
hi Tharuka Dananjaya,
the problem was totally made from bootstrap external css only.
how to solve?
1. first to check which section is breaking and inspect the element, you can see
the browser take the boostrap css not your style.
so what to do , make that particular css as !important
eg: color:red!important;
make your style high priority!
copy your whole code from style.css, and paste in your html page
as internal css styling way, which means put in b/w head and 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