There is a print setting (Scale) in Chrome that I would like to emulate.
In IE11, I have added in the css and that seems to fix it but not in Chrome.
#page {
size: A4 portrait;
margin: 1mm 1mm 0 5mm;
}
In Chrome, I have to manually change the scale to 50 to fix it. I have tried in css
zoom: 50%
transform: scale(0.5);
UPDATE
Now I know why it is working in IE11. Nothing to do with setting the A4 size.
Looks like IE has a 'Shrink to Fit' settings that's turned on by default.
I don't think there is a way to do in CSS.
Finally found the answer.
It is because of the bootstrap css.
I implemented the fix below and it seems to work for now.
https://github.com/twbs/bootstrap/issues/12078
You cannot provide zoom in #page. However you can set zoom to parent container inside #media print. You can do something like this
#media print: {
.container: {
zoom: 50%;
}
}
Here container class is applied to parent, so when you print it entire screen will be scaled to 50%.
As per documentation #page only support size, marks and bleed. More details available over here https://developer.mozilla.org/en-US/docs/Web/CSS/#page.
For more details about using print css you can read beautiful blog by Racheal Andrew. https://www.smashingmagazine.com/2015/01/designing-for-print-with-css/
You can check pen here https://codepen.io/sandipnirmal/pen/ajWWgp.
Following are screenshots:
Chrome Scaling:
Media Print with zoom: 50%
Those are User settings you are trying to manipulate and you cannot alter the Scale.
Try this out:
#media print {
body {transform: scale(.5);}
table {page-break-inside: avoid;}
}
Related
I wanted to change how my site displays my products on a mobile device.
As standard it was displaying one item per row and i wanted to show two items per row.
I used the following CSS to acheive this:
#media only screen and (max-width: 600px) {
.product-item{
width: 50%;
}
}
I tested in chrome and firefox browser tools and it appeared to work fine on mobile view.
On a real phone there is white gaps and sometimes only 1 item per line.
Can anyone help? My website url is: DELETED URL
Update: Screenshot of what happens DELETED URL
Your code is missing this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
Without the viewport some mobile browsers wont display your page correct.
Take care that all classes or ids you want to be reponsive are corret declared
for each device.
add media queries for devices you want to support,
this list from css-tricks.com could be helpful:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
if you want to align everything in a correct row the classes eventually need a float declaration:
#media only screen and (max-width:600px) {
.product-item{
float : left;
width: 50%;
}
}
If you get spacings that should not be there, there is very simple solution:
*{
margin : 0 ;
padding : 0 ;
}
Your css also suffers some parse errors which could also lead to some
errors.
Here is a unicorn test of your shop:
https://validator.w3.org/unicorn/check?ucn_uri=https%3A%2F%2Fblupstore.com%2F&ucn_task=conformance#
I found a temporary fix. I used:
#media only screen and (max-width:600px) {
.product-item{
float : left !important;
width: 50% !important;
border: red solid;
box-sizing:border-box
}
}
I could see the first item was messing up the layout. I removed it from the category and re added it at the bottom. This is by no means a fix but it is a good solution to fix the display while i fix the parse errors.
This wouldn't have been possible without the help from #Thorsten Wolske and #Nikhil Gangurde
You can add some css style.
#media only screen and (max-width:600px) {
.product-item:nth-child(2n+1) {
clear: left !important;
}
}
I have an issue when printing from a twitter bootstrap appplication.
https://hod-nav.herokuapp.com/members/H0252#
When trying to use the print button, or just file > print, the #sidebar-wrapper still takes up real estate on printed pages.
This only occurs om PC Safari, Mac Safari, and Mac Firefox.
I'm using BS 3.3.6.
I've done a ton of things.
• My css is set to media: 'all'
• I've played around with BS print style sheets like so...
#media print {
#sidebar-wrapper {
display: none !important;
visibility: hidden !important;
}
• I've added the mysterious class="hidden-print" to the element in question.
• I'm able to hide things that don't need to be printed with print style sheets like the above.
• I've also added additional selectors from the cascade to target the element very specifically.
As you can see from either clicking the print button, or just a basic CTRL/CMD + P, the problem browsers listed above want to keep the 250px+ white space at the left, vs. allowing the main container div with the map in it to print at full width as in other browsers.
Just wondering if anyone else had come across this issue in these browsers or others.
I'm happy to proved additional information.
Thanks in advance for reading and thinking.
Sincerely,
Dick
It's not the #sidebar-wrapper taking up space in the layout, it's the left padding of the main element, which you need to disable on print:
#media print {
#wrapper {
padding-left: 0;
}
}
This needs to be placed at the end of your styles, to override the #wrapper selector inside #media (min-width: 768px). Alternatively, you could use div#wrapper instead of #wrapper and it will apply regardless of its position in the CSS file.
And, by the way, none of these ids have anything to do with Twitter Bootstrap.
Looks like there is padding in your wrapper element ->
#wrapper { padding-left:250px;}
This works well for browsers that support background-size. Otherwise the 2x image is zoomed.
.a {
background-image: url(img2x.jpg); /* 1000x1000 */
background-size: 100%;
height: 500px;
width: 500px;
}
This should be used for browsers without background-size support.
.a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
}
Is it possible to trick the browser to fallback when background-size is not supported? I know I can use #supports but it's much less supported than background-size so quite pointless in this case. I don't want to use JavaScript either.
Basically like so, except work!
.a {
background-image: url(img1x.jpg); /* 500x500 */
height: 500px;
width: 500px;
/* stop parsing this rule when background-size is not supported */
/* otherwise continue parsing and set different background-image */
background-size: 100%;
background-image: url(img2x.jpg); /* 1000x1000 */
}
This doesn't work obviously, but is there a trick which could make it work? Thanks.
A CSS-only fallback for background-size is tricky, but yes it can be done.
The trick is to use the short-form background style to set the various background properties, rather than using the individual styles like background-size, background-image, etc.
So in your case, you would have something like this:
background: url(img2x.jpg) 0% 0%/100%;
(The 0% 0% is for background-position (0% 0% is default) which is required before the background-size value when using the short-form style).
So far, all I've done is condense your existing code into a single short-form CSS line, but the clever bit is that now we've done this, a browser that doesn't recognise background-size will throw away the whole line, rather than just throwing away the background-size on its own.
This means that we can specify an entirely different set of background values for older browsers.
background: url(ie8bg.jpg); /* Shown by IE8 and other old browsers */
background: url(img2x.jpg) 0% 0%/100%; /* shown by new browsers with background-size support*/
You can see a demonstration of this in action here. Modern browsers will get the one background image, stretched by a 100% background-size setting, and older browsers (like IE8) will get the an entirely different image, without any stretching.
Since you get to define an entirely separate background for old browsers, you can even do things like have a solid background colour for IE8 rather than an image while still providing an image for other browsers.
So yes, a fully CSS solution that gives you a fallback for browsers that don't support background-size.
Hope that helps.
[EDIT]
Browser compatibility may be a minor issue here. Some browsers may support background-size but not support it as part of the background short syntax. For the most part this applies only to older browsers (eg Firefox 7), but it is still a problem in current versions of Safari. What this means is that with this technique, Safari will see the fall-back background, even though it does actually support background-size.
This obviously isn't ideal, but it is mitigated by the fact that it will at least get the fallback image, which means the page ought to at least look okay, if not quite as good as in other browsers. Hopefully this issue in Safari will be fixed in a future version.
In the meanwhile, this point doesn't detract from the fact that this answer is a valid solution to the question - it does indeed provide a fallback option in pure CSS.
In light of this question I've written a blog post on the subject, which hopefully covers it in more detail and provides other options if this CSS fall-back solution isn't sufficient.
You already mentioned #supports. You could define imgx1.jpg as default and if background-size is supported, you set it to img2x.jpg
For browsers like Chrome you could parse your CSS file with PHP and decide according to the User-Agent if the browser supports this or not.
You get the User-Agent in PHP with $_SERVER['HTTP_USER_AGENT']
I might not completely understand what exactly the problem is with the lack of support of the 'background-size' property, but here is my thinking:
If you want to use a double sized background image, probably that is for high density (retina) displays. If so, I'd try to define my basic style with the single background image and the 'background-size', which will be ignored by older IE versions. However, browsers handling the pixel-density media query will try to render the double density background image.
.a {
background-image: url(img1x.jpg); /* 500x500 */
background-size: 500px 500px;
height: 500px;
width: 500px;
}
#media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.a {
background-image: url(img2x.jpg); /* 1000x1000 */
}
}
I hope it makes sense and that's what you've been looking for.
Here are some more nice ideas about CSS/JS retina background sizing: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/
I have a page which uses non-external CSS in the <style> tags, and in those <style> tags is the following media query:
#media screen and (max-width:768px){
/* CSS */
}
All is working fine in Firefox, the CSS for 768px width and under only renders when it should. However, in IE9, the CSS inside this media query is rendered on load no matter what the size is.
After it loads however, if I change the browser size at all, it rerenders as the desktop version, as it should. So basically, IE9 non-external stylesheet seems to be rendering all CSS, whether it's in a media query for which it doesn't match or not, but then rendering the correct CSS if the browser is resized, even by a pixel.
Does anyone know what exactly is going on with this, or if there's a quick fix? The only solutions I've been able to think of would be working around the issue by reordering my CSS, and adding a new media query, which I'd like to avoid for the ease of updating code.
I had a similar problem with an external css file in ie10.
I sort of fixed it by giving the query a minimum of 1px (0px doesn't seem to work).
It doesn't solve all my problems, but it may be enough for yours.
#media screen and (min-width: 1px) and (max-width:768px){
/* CSS */
}
I came across a similar issue that was happening in IE 10. Setting a min for the media query did not help fix this particular issue. I used a bit of js to resize the window to the exact same size and it fixed the issue that IE was having. It feels a little dirty, but it works.
$(document).ready(function() {
var w = window.outerWidth;
var h = window.outerHeight;
window.resizeTo(w, h);
});
I had similar issue while using external css with media query. solved by loading css after html code.
You can target IE9 only with this fix:
/* IE9 */
#media all and (min-width:0\0) and (min-resolution:.001dpcm) {
body {
background: blue;
}
}
I found that some jQuery Plugin, in their css rule uses 'zoom' descriptor, I even Look into w3c website and found that it is used to magnify but how can I actually implement it? Or I have to Define some viewport? And how do I define such viewport ? Or i am wrong about the whole stuff ?
is it possible to use it like
a {
zoom:1;
}
a:hover {
zoom:2;
}
Zoom is not included in the CSS specification, but it is supported in IE, Safari 4, Chrome (and you can get a somewhat similar effect in Firefox with -moz-transform: scale(x) since 3.5). See here.
So, all browsers
zoom: 2;
zoom: 200%;
will zoom your object in by 2, so it's like doubling the size. Which means if you have
a:hover {
zoom: 2;
}
On hover, the <a> tag will zoom by 200%.
Like I say, in FireFox 3.5+ use -moz-transform: scale(x), it does much the same thing.
Edit: In response to the comment from thirtydot, I will say that scale() is not a complete replacement. It does not expand in line like zoom does, rather it will expand out of the box and over content, not forcing other content out of the way. See this in action here. Furthermore, it seems that zoom is not supported in Opera.
This post gives a useful insight into ways to work around incompatibilities with scale and workarounds for it using jQuery.
Surprised that nobody mentioned that zoom: 1; is useful for IE6-7, to solve most IE-only bugs by triggering hasLayout.
This property controls the magnification level for the current element. The rendering effect for the element is that of a “zoom” function on a camera. Even though this property is not inherited, it still affects the rendering of child elements.
Example
div { zoom: 200% }
<div style=”zoom: 200%”>This is x2 text </div>
CSS zoom property is widely supported now > 86% of total browser population.
See: http://caniuse.com/#search=zoom
document.querySelector('#sel-jsz').style.zoom = 4;
#sel-001 {
zoom: 2.5;
}
#sel-002 {
zoom: 5;
}
#sel-003 {
zoom: 300%;
}
<div id="sel-000">IMG - Default</div>
<div id="sel-001">IMG - 1X</div>
<div id="sel-002">IMG - 5X</div>
<div id="sel-003">IMG - 3X</div>
<div id="sel-jsz">JS Zoom - 4x</div>
Only IE and WebKit support zoom, and yes, in theory it does exactly what you're saying.
Try it out on an image to see it's full effect :)
zoom is a css3 spec for the #viewport descriptor, as described here
http://dev.w3.org/csswg/css-device-adapt/#zoom-desc
used to zoom the entire viewport ('screen').
it also happens to zoom individuals elements in a lot of browsers, but not all.
css3 specifies transform:scale should be used to achieve such an effect:
http://www.w3.org/TR/css3-transforms/#transform-functions
but it works a little different than the 'element zoom' in those browsers that support it.
As Joshua M pointed out, the zoom function isn't supported only in Firefox, but you can simply fix this as shown:
div.zoom {
zoom: 2; /* all browsers */
-moz-transform: scale(2); /* Firefox */
}