My app generates printed reports by creating an invisible iframe and then printing it. My latest in a depressingly long list of problems I'm trying to solve is optimizing the CSS for different printed page sizes. IE9 seems to work a bit (but has other issues, like ignoring #page { margin:... }), but no luck at all on FF or Chrome.
My code looks like this:
#media print and (width: 210mm) and (height: 297mm) {
... stuff for A4 size ...
}
#media print and (width: 8.5in) and (height: 11in) {
... stuff for US letter size ...
}
Neither of these rules is being matched, ever, in Chrome or FF. I also tried device-width and device-height, and those didn't work either (they seemed to be reporting the absolute maximum sizes of the printer, rather than the page size). I can't figure out what value "width" and "height" are returning, is there a way to tell?
Is there a reliable way to detect printed page size using media queries? I'm pretty close to concluding that there is simply no way to control printing in any consistent way across browsers, and throwing in the towel on this.
Just try this code May be this can fixed your problem.
<page size="A4"></page>
Css
#page {
size: A4;
margin: 0;
}
page {
background: white;
display: block;
margin: 0 auto;
margin-bottom: 12px;
box-shadow: 0 0 5px rgba(0,0,0,0.5);
}
page[size="A4"] {
width: 210mm;
height: 297mm;
}
#media print {
body {
margin: 0;
box-shadow: 0;
background: rgb(204,204,204);
}
}
Related
So this question seems to be asked a lot but in the reverse.. I'm having the issue where my media query is overriding the previously set styles in a mobile first design and I don't know why. Mobile should be padding: 33rem 0 and desktop should be padding: 18rem. See below.
.description {
background-image: linear-gradient(#b676fa,#14D8EB);
padding: 33rem 0;
}
#media only screen and (min-width: 900px) {
.description {
padding: 18rem;
}
}
Works fine for me.. All brackets closed? Run it through a CSS validator perhaps - https://codepen.io/pmackey-deveire/pen/vYBvxQz
Have you checked the inspector to see what styles are being applied as you change the window size?
Perhaps using PX instead of REM for testing.. 33rem appears to be smaller than 18rem on mobile so you might be tricked into thinking it's not working
I'm having print stylesheets for a page in vue.js When calling window.print(); on windows the page gets smaller printed as it should be (see Image). When I do the same on Mac it prints it perfectly. Also the preview on Mac is correct but on Windows it isn't.
Windows example
There is a sidebar in the application which had a transition. I added the following for the whole application:
#media print {
#page {
size: 210mm 297mm;
margin: 15mm;
}
* {
transition: none !important;
}
}
The sidebar has a display: none; when getting printed. As well as the footer because it is not needed on paper.
Also the container of the site has special styles to keep the full size
#media print {
margin: 0;
padding: 0;
min-width: 0 !important;
max-width: initial;
width: 100vw;
font-size: 1.2rem;
}
I didn't want to automatically create a pdf so far because I only have one browser (chrome) which should handle the print styles. It would make it selectable and nicer in case of resolution (I think).
I expect to have the same print result from electron with vue on Windows and Mac. Actually I only need it to be correct on Windows 🙈
Without the specific size setting the page prints at the moment correct. So I removed these lines:
#page {
size: 210mm 297mm;
margin: 15mm;
}
In my class we are starting to use Media Queries and I am having a little trouble with an assignment. For a previous assignment we were tasked with remaking a website called "the Toast" as best we could, which I have here. Now for this assignment we are to use media query to do a few things:
This assignment is all about media queries and getting your site to be
responsive. We will be using the website The toast again for this
assignment. You will be laying out two columns for the content area.
When the screen size hits 960px the right column must disappear. The
articles in the left column must adjust to the width of the screen.
The images must get bigger and fill the article at 960 px as well.
At 760 px the support us button, love the toast text and the social
media must disappear.
In the code I have two columns, a "bigColumn" and a "adColumn". Now to my understanding to make the adcolumn disappear and adjust the bigColumn I simply have to add:
#media only screen and (max-width: 960px) {
.main {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
}
However this is not working. The ad never disappears and the rest of the content doesn't do anything in terms of filling the rest of the page when shrinking the window. If I change the background color in the .main the color changes, but changing anything in the two divs has no effect that I can see. I can get the social media icons to disappear at 760px just fine, so am I just missing something with the media query for the columns? Or could something else be interfering with it?
EDIT: Guess I should mention that yes, I am indeed using SASS in the project.
Here is the styling I have for the columns before I started the media query:
.main {
width: 90%;
display: flex;
min-height: 200px;
margin: 0 auto;
//column for main-page content
.bigColumn {
width: 800px;
height: 100%;
margin-top: 20px;
margin-right: 9%;
margin-left: 13%;
}
.adColumn {
margin-top: 20px;
position: relative;
min-height: 120px;
}
}
I don't believe you can nest your CSS like that unless you are using a preprocessor like LESS or SASS. Try taking the .bigColumn CSS out of the .main brackets and leave it on its own.
#media only screen and (max-width: 960px) {
.bigColumn {
width: 100%;
}
.adColumn {
display: none;
}
}
Based on your css I think you're close, but there appears to be a an error in the way you've structured your css. Give this a try. I'm assuming .bigColumn and .adColumn are children of .main:
/* All screens 960px or less */
#media only screen and (max-width: 960px) {
.main .bigColumn {
width: 100%;
}
.main .adColumn {
display: none;
}
}
Intro
this is similar to this question but unfortunately the answer only applies to greasmonkey (which only works on firefox). Further, this was asked on the stylish forum but the answer was ambiguous.
Question
I want to remove the left column in the azure help page and
expand the main body to make it cover the widht of the screen.
The first part can easily be done by this
#sidebarContent {display:none}
How ever the second part must conver this
media (max-width: 1199.99999px)
to this
media (max-width: 100%)
But I have no idea how to do that using stylish.. ideas?
To override a media query you just need to load another media query - that also applies to your device - after it.
Well...you want a blunt media query that applies to everything. The best way is to use #media (min-width: 1px) since that includes all devices.
Now, put it all together - along with some other CSS cleanups like padding and margin removal and setting a new width for .mainContainer and you get this
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer {
margin: 0 auto;
width: 100vw;
padding: 0;
}
body>.container {
padding: 0;
}
}
New code: (with different selector for width)
#sidebar {
display: none;
}
#media (min-width: 1px) {
.mainContainer { /*example styles*/
margin: 0 auto;
width: 100vw;
}
body>.container {
padding: 0;
}
body>.mainContainer>main {
max-width: 100vw!important;
}
}
You still have to adjust the padding to your preference as setting the padding to 0 breaks the design a little bit but this should be good starting point.
Before:
After:
I'm trying to make a website that is essentially a few vertically positioned slides. I had been hoping to make a responsive design so my "slides" are appropriately resized on larger screen sizes or are padded appropriately in strange dimensions. Here is my LESS file setting the appropriate dimensions:
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
//============================================================
// Dimensions for each section for standard desktop screen
//============================================================
#home {
#media screen and (min-aspect-ratio: 16/10) {
height: 92%;
width: 160vh;
padding: 0 calc(50% - 80vh);
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 57.5vw;
}
}
#about {
#media screen and (min-aspect-ratio: 16/10) {
height: 108%;
width: 160vh;
padding: 0 calc(50% - 80vh)
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 67.5vw;
}
}
#experience, #hobbies, #contact {
#media screen and (min-aspect-ratio: 16/10) {
height: 100%;
width: 160vh;
padding: 0 calc(50% - 80vh);
}
#media screen and (max-aspect-ratio: 16/10) {
width: 100%;
height: 62.5vw;
}
}
//============================================================
// colors
//============================================================
#home {
background-color: black;
}
#about {
background-color: #488BFF;
}
#experience {
background-color: #B3B3B3;
}
#hobbies {
background-color: #FF7F35;
}
#contact {
background-color: #803A7D;
}
It seems to work for the most part when I run it with a simple html file with the 5 divs (home, about, experience, hobbies, contact). However, on chrome, a bug seems to occur while I resize. Sometimes, my webpage simply disappears, replaced with some black/gray cross. If I resize very quickly (rapidly resizing the window), a checkerboard appears or even some other webpage completely on a different tab. I tried testing resizing another webpage also using media queries, and this problem did not happen. Is there something inherently wrong with how I'm using media queries?
EDIT: Sample images showing the strange problems:
After a long and arduous chat session, we have worked out a fix for the bug. Here is the summary:
What's Wrong
For some reason, Chrome has a problem rendering large divs. As of now, I'm not sure where the bug lies exactly, but a simple example with 5 100% width/height divs causes this strange problem. Here is a JSFiddle with this example. The bug only manifests outside of a frame, so you must copy the frame source into its own webpage.
From what I can gather, something strange is happening under the hood in Chrome's rendering engine on Windows, which causes the strange black & gray crosses to appear when resizing a window.
The Fix
The fix isn't very elegant, but it works. Simply apply a transform:rotate(0) on each of the divs to force gpu acceleration. With this, the cross vanishes. Here is the resulting JSFiddle that applies this fix on the previous example.
TL;DR
When Chrome isn't rendering the pages with the graphics card, strange things occur. Use transform:rotate(0) on broken items to force graphic card rendering.