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
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'm having a really bizarre problem with a homescreen html app on an ipad. It's a rather complex single-page app, which is also loaded for offline use with the cache.manifest.
I have three css files: one global plus one for each portrait and landscape, which are loaded using media queries. The media queries use screen width - to ensure they work correctly with other devices. CSS are loaded like this:
<link rel="stylesheet" type="text/css" href="css/ebot.css"/>
<link rel="stylesheet" media="screen and (min-width: 820px)" type="text/css" href="css/ebot-ls.css"/>
<link rel="stylesheet" media="screen and (max-width: 819px)" type="text/css" href="css/ebot-ss.css"/>
On a high level, the HTML looks like this:
<div class="parent">
<div id="screen1" class="fullscreen">
...
</div>
<div id="screen2" class="fullscreen hidden">
...
</div>
<div id="screen3" class="fullscreen hidden">
...
</div>
</div>
Class .hidden is defined as .hidden { display: none; }
Naturally, within each of the fullscreen divs, there are lots of other elements. When the app starts, screen1 is visible and then through user interaction, it's replaced by either screen2 or screen3.
Now, when I start the app with ipad being in portrait mode, everything works perfectly fine. If I then rotate it into landscape, everything works fine - with new style rules applied correctly.
When I start the app with the ipad in landscape mode, I get a really messed up screen with screen1 visible in full screen, as it's supposed to be. Yet, as it has transparent background, I can see behind its elements individual child elements of both screen2 and screen3, but without any of their css classes applied to them at all. In addition, the elements on the visible screen1 also seem to have only some CSS rules applied to them (e.g. borders are in place, but fonts are not).
If I rotate the ipad into portrait mode and then back to landscape, everything fixes itself.
I attached the ipad to my mac to debug it from Safari. In the debugger, when I inspect the elements, I can see the styles being applied correctly, so by all rules none of the "background nonsense" should be visible. If in the inspector in Safari I uncheck rule display: none and then check it again, then everything fixes itself.
Overall it feels/looks like CSS are only applied partially on the first load - and only after the page refresh/repaint/re-something are they applied correctly.
This makes the app utterly unusable. I can't expect my users to rotate the device and then rotate it back before using the app.
What can I try doing to solve this problem?
Have you tried orientation media queries?
<link rel="stylesheet" type="text/css" href="css/ebot.css"/>
<link rel="stylesheet" media="screen and (min-width: 820px) and (orientation:landscape)" type="text/css" href="css/ebot-ls.css"/>
<link rel="stylesheet" media="screen and (max-width: 819px) and (orientation:portrait)" type="text/css" href="css/ebot-ss.css"/>
Check the documentation for alternatives that may help.
Also, this meta tag has served me well in the past with iPad issues such as these
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
Some documentation on the viewport meta tag to clear any doubts
EDIT: Others have stumbled upon this
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
I am writing a web application for use on mobile touch devices, to begin with I am concentrating on the ipad. The application will contain a grid of thumbnail photographs, similar to google images.
I am really struggling with the layout of this site, I want the thumbnails to be equally spaced, with margins of the same size at the edges.
I have tried several methods, but have run into problems with all of them.
1.I tried designing the site with a fixed width of 960px, and laid out the thumbnails and their margins symmetrically for this width. This worked to a degree, but the ipad defaults the browser width to 980px, so the white space at the edges were larger than I would have liked.
2.The same as above, but I also specified:
<meta name="viewport" content="width=960, user-scalable=no" />
Everything now looks as it should on the ipad (in portrait), it's not too bad in landscape (I think the thumbnails are blown up, and a little pixelated). It displays fine on the desktop, but is unusable on the iphone as everything is too small.
3.To get round the above problem, and as suggested by apple themselves I tried swapping the above with:
<meta name="viewport" content="width=device-width" />
With this, I get a sensible scale for both iPhone and iPad, but the problem is I can't get pixel perfection on my layouts, the white space at the left and right edges of the screen are not equal (because I am dealing with a grid of fixed width images, that do not fit a whole number of times into the space available)
Can anyone suggest the best approach please, I did consider using javascript to adjust the layout, but would prefer not to take this route.
Thanks
A good attempt. I use this, see my link for an example, however this is only for iPhone mainly as the iPad is different. I would suggest seeing the FIXED layouts on:
http://www.gorgeouscouture.com/mobile/
http://m.oasis-stores.com/
http://m.asos.com/mt/www.asos.com
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mobile.css" type="text/css" media="all, handheld" />
Notice I do not use the HTML5 heading. This is simply for other use of mobile devices. MyCSS:
body{width:320px;margin: 0px auto;min-height:356px;font-family:Georgia, Georgia, Arial, serif;background-repeat:repeat;background-position:50% 50%;text-align:center;background-color:#f4f8f9}
#b{position:relative;margin-left:0px;margin-right:0px;width:auto;height:auto;background:#fff;-moz-box-shadow:0 0 3px 3px #eaeaea;-webkit-box-shadow:0 0 3px 3px #eaeaea;box-shadow:0 0 3px 3px #eaeaea}
#content{position:absolute;width:auto;height:auto;top:25%;background:#fff}
Notice the fixed width assignment though.