So I want to know how to set a Max Height Media Breakpoint in TailWindCSS Config.
IPad Pro's are recognised as Laptops because of their width.
That said, they are far too tall for Laptop CSS, making my site look horrible.
Any help welcome,
Thanks,
Justin.
I spit through the Tailwind docs, it seems like there are none for Max Height media queries.
But you can create your own Custom media queries. I don't known the height of an iPad Pro. But I made an example based on the docs. (Also untested example)
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'iPad': {'raw': '(max-height: 1234px)'},
// => #media (max-height: 1234px) { ... }
}
}
}
}
Edit:
I'm not sure what the output of this will be, my guess iPad:text-xl or something.
You can just apply it directly to the jsx element inline. for example
<div className='max-h-[1234px]'></div>
Related
I want to extend 540px and 1920px screen size in tailwind but 'xxs' didn't work.
**theme: {
extend:{
screens:{
'xxs':'540px',
'xxl':'1920px',
},
}
}**
If you want to add an additional small breakpoint, you can’t use extend because the small breakpoint would be added to the end of the breakpoint list, and breakpoints need to be sorted from smallest to largest in order to work as expected with a min-width breakpoint system. Use this code instead:
theme: {
screens: {
'xxs':'540px',
...defaultTheme.screens,
},
},
Here is the related link:
Adding smaller breakpoints
Paper isn't the same shape the world over. I have a document that I want to print differently when it's printed on A4 versus US Letter. Some elements should be hidden or shown. The obvious suggestion is to use a media query like so:
#media print and (max-height: 280mm) {
.a4-only {
display: none;
}
}
This doesn't appear to work, though, presumably because it's using the total document height or some irrelevant window height rather than the page height.
Is there a way of addressing page size accurately?
Browser support for print specific media queries is varied and there doesn't seem to be any good resources for it. It's really not possible to do this cross-browser, in some browsers the support is not there at all. Safari for example, seems to use the size of the browser rather than the page for it's media queries.
You can get it working in Chrome and Firefox. I knocked up a very rough demo using the size ratio to show what is possible with a bit of work. Currently tested and working on current versions of Chrome and Firefox on macOS. You should get a message at the start of the page with the printed page size (only when printed).
http://gsgd.co.uk/sandbox/print-test.html
The main trick is using vw units to check for height, hence using the aspect ratio you can target specific paper sizes:
#media print and (min-height:160vw) and (max-height: 170vw) { /* legal-size styling */ .standard.container::before { content: "LEGAL"; } }
#media print and (min-height:135vw) and (max-height: 145vw) { /* A4 styling */ .standard.container::before { content: "A4"; } }
#media print and (min-height:125vw) and (max-height: 135vw) { /* letter-size styling */ .standard.container::before { content: "LETTER"; } }
Unfortunately it seems like Chrome's page sizes for printing don't match the output page size so I guesstimated some styles that match for Chrome.
#media print and (min-height:120vw) and (max-height: 150vw) { /* legal-size styling */ .chrome.container::before { content: "LEGAL"; } }
#media print and (min-height:100vw) and (max-height: 120vw) { /* A4 styling */ .chrome.container::before { content: "A4"; } }
#media print and (min-height:80vw) and (max-height: 100vw) { /* letter-size styling */ .chrome.container::before { content: "LETTER"; } }
With an incredibly rudimentary browser detector script
if(navigator.userAgent.match(/chrome/i)) {
document.querySelector('.container').className = 'chrome container'
}
An idea to get something to work for Safari would be to manually resizing the window, but that would likely be a ton of work and require the user to select print size up front.
All that said you might get better mileage fixing up your layout to respond better to different widths.
I would like to present a demo of a tablet application on a website (targeting desktop browsers).
I chose an iPad 2 for the demo whose resolution is 1024x768. Adding an iPad transparent graphic cover, the demo final size is 1210x1315px.
With such a resolution, most of the screens will be too small to display the demo properly.
I don't want to resize manually all the design, or to use CSS transform without knowing the relevant scale. Therefore, I'm looking for a way to resize automatically the design according to the available display resolution.
I tried to use the #-viewportproperty with no success...
Here is my non working code:
#media (min-height: 1400px) { /* if the screen's height is smaller than 1400px... */
#-viewport{
height:1400px; /* ... then, let's pretend it's 1400px high*/
}
}
I also tried this :
<meta name="viewport" content="height=1400, initial-scale=1" />
EDIT : jQuery workaround:
function resize(){
var documentHeight = $(document).innerHeight();
var targetedHeight = 1500;
if (documentHeight < targetedHeight){
var ratio = documentHeight / targetedHeight;
$('#container').css('transform','scale('+ratio+')');
$('#container').css('-webkit-transform','scale('+ratio+')');
$('#container').css('-moz-transform','scale('+ratio+')');
$('#container').css('-ms-transform','scale('+ratio+')');
$('#container').css('-o-transform','scale('+ratio+')');
}
}
This is what I finally did to achieve the expected result. I would have prefered a pure CSS solution...
I think you should be using media queries: Logic in Media Queries
I've put the following meta tag in my mobile HTML
<meta name = "viewport" content = "initial-scale = 1.0">
After I coded the css file for mobile version, I realized it doesn't look good on lanscape mode since it has a different width size. I get an empty 160 pixel area on the right side.
Other than writing a separate css file for landscape mode, is there any way getting out of this?
You also need to bind the orientation change event. You can do it with this sample script:
<script>
$(function(){
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
$('.featured').css('display','none');
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$('.featured').css('display','block');
orientation = 'landscape';
return false;
}
}
$(window).bind( 'orientationchange', function(e){
orient();
});
})();
</script>
If your css layout is based on screen percents instead of absolute values it should allow you to adjust to any screen layout without multiple css files just fine.
Look at the percent option: http://www.w3schools.com/cssref/pr_dim_width.asp
Or if you had a layout you wanted constant, you could center it.
center align the outise wrapper.
body{
max-width:786;/*target size of page*/
margin:0 auto auto auto;
}
is the easiest way.
You can use media queries to detect orientation changes and run different styles for each all in the same stylesheet.
Also for mobile it's a good idea to you use % rather than px for widths - what units do you use for css for mobile web apps?
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}
I recently implemented this technique with SASS 3.2 using #content blocks on a project I've been working on, and I've just gotten to the point where I need to include support for older browsers such as IE7 and 8.
Example:
.overview {
padding: 0 0 19px;
#include respond-to(medium-screens) {
padding-top: 19px;
} //medium-screens
#include respond-to(wide-screens) {
padding-top: 19px;
} //medium-screens
}
They both don't support media queries, and I've often handled this in the past by serving up all styles to these browsers when I had my media queries separated into separate partial files such as _320.scss, _480.scss and in my IE stylesheet loading them like so:
#import 320.scss;
#import 480.scss;
etc.
Which would load all styles, and always assign IE7 - 8 a 940px (or whatever the max width is) layout and styles. By nesting styles in SASS 3.2 inline like this, it eliminates the need for separate partial stylesheets, but totally screws up how I load styles for IE.
Any ideas or solutions on how to combat this? I could use a polyfill such as respond.js to force IE to use media queries, but would prefer to just serve up a non-flexible site to IE.
Any ideas on either how to best organize these files, or a better solution?
You can generate a separate stylesheet for IE<9 that contains everything your normal sheet has, but with flattened media queries based on a set width.
Full explanation here http://jakearchibald.github.com/sass-ie/, but basically you have this mixin:
$fix-mqs: false !default;
#mixin respond-min($width) {
// If we're outputting for a fixed media query set...
#if $fix-mqs {
// ...and if we should apply these rules...
#if $fix-mqs >= $width {
// ...output the content the user gave us.
#content;
}
}
#else {
// Otherwise, output it using a regular media query
#media screen and (min-width: $width) {
#content;
}
}
}
Which you'd use like this:
#include respond-min(45em) {
float: left;
width: 70%;
}
This would be inside all.scss, which would compile down to all.css with media queries. However, you'd also have an additional file, all-old-ie.scss:
$fix-mqs: 65em;
#import 'all';
That simply imports all, but flattens media query blocks given a fake width of 65em.
I use LESS for a lot of my work, but on larger projects, with many people working across files, I don't like using breakpoint files, such as 1024.less.
My and my team use a modular approach, such as header.less which contains all the code for just the header, including the associated breakpoints.
To get round IE problems (we work in a corporate environment), I use this approach:
#media screen\9, screen and (min-width: 40em) {
/* Media queries here */
}
The code inside the media query is always executed by IE7 and less. IE9 and above obeys the media queries like a proper browser should. The problem is IE8. To solve this, you need to make it behave like IE7
X-UA-Compatible "IE=7,IE=9,IE=edge"
I've found this doesn't always work if set in the metatags in the HTML, so set it using the server headers.
See the gist here:
https://gist.github.com/thefella/9888963
Making IE8 act like IE7 isn't a solution that works for everyone, but it suits my needs.
Jake Archibald has the best technique I've seen to date for achieving this. This technique automatically creates a separate stylesheet for IE, with all the same styles inside of your media queries but without the media query itself.
I also campaigned to get this technique built into the popular breakpoint extension for Sass, if you're interested in using that!
If you wanted to keep everything under one roof and only have a single http request for your older browser visitors you could do something like this
Setting up your initial respondto mixin
// initial variables set-up
$doc-font-size: 16;
$doc-line-height: 24;
// media query mixin (min-width only)
#mixin breakpoint($point) {
#media (min-width: $point / $doc-font-size +em) { #content; }
}
this will create a min-width media query and output your px value ($point) as an em value.
From this you'd need to create this mixin
#mixin rwdIE($name, $wrapper-class, $IE: true) {
#if $IE == true {
.lt-ie9 .#{$wrapper-class} {
#content;
}
.#{$wrapper-class} {
#include breakpoint($name) {
#content;
}
}
}
#else if $IE == false {
.#{$wrapper-class} {
#include breakpoint($name) {
#content;
}
}
}
}
Here if you pass a piece of Sass(SCSS) like this
#include rwdIE(456, test) {
background-color: #d13400;
}
it will return this code
.lt-ie9 .test {
background-color: #d13400;
}
#media (min-width: 28.5em) {
.test {
background-color: #d13400;
}
}
This will give you the you the IE and 'new browser' CSS in one file. If you write -
#include rwdIE(456, test, false) {
background-color: #d13400;
}
You will get -
#media (min-width: 28.5em) {
.test {
background-color: #d13400;
}
}
I hope this helps, I've got this on a codepen here too - http://codepen.io/sturobson/pen/CzGuI
There is a CSS3 Mixin I use that has a variable for IE filters. You could do something similar by having a global variable, $forIE or something, wrap the media query mixin within an if and then generate the stylesheet with or w/o the queries.
#if $forIE == 0 {
// Media Query Mixin
}
Or use the #if to import a 3rd scss (_forIE.scss?) that will override things with your IE specific styles.