First of all, I do search and research and try this about a week and has no clue.. so I thought I have earned my right asking somewhat simple, haha!
For some reason, it looks like, width: 210mm; doesn't work as I want. Following screenshot rendered as print mode with F12 tool on chrome.
This is css..
#media screen {
body {
background-color: #eeeeee;
counter-reset: page-number;
}
}
#media print {
#page {
size: A4 portrait;
margin: 0mm;
}
html, body, .page-frame { max-width: 210mm; }
.page-frame {
margin: 0;
}
}
.page-frame
{
overflow: hidden;
position: relative;
page-break-after: always;
background-color: white;
width: 210mm;
height: 297mm;
padding: 30mm 20mm 20mm 20mm;
border: 1px solid #dddddd;
column-count: 2;
column-gap: 5mm;
column-rule-width: 2px;
column-rule-color: var(--secondary);
column-rule-style: solid;
counter-increment: page-number;
margin-top: 1em;
}
/* page layouts */
.page-header { position: relative; column-span: all; margin-top: -17mm; margin-bottom: 2mm; height: 15mm; border-bottom: 2px solid var(--secondary); }
.page-footer { position: relative; column-span: all; height: 10mm; padding-top: 2mm; border-top: 2px solid var(--secondary); text-align: center; margin-top: 2mm; }
.page-header > div, .page-footer > div { position: absolute; width: 100%; height: 100%; }
.page-footer .page-number:before { content: counter(page-number); }
.column-frame { height: 100%; width: 100%; }
In other attempts, including uploaded image, the grey area (body element) remains and surround expecting-paper area and I cannot get rid of this surrounding grey area.
Also, .paper-frame div itself looks smaller than actual a4 size.. and I cannot understand whats happening at this point.
All I want is the .page-frame element properly rendered as A4 size on both screen and print.. and it's hard!
I'm using bootstrap 4 on laravel 7.x and latest version of Chrome browser..
Edit 1 --- Chrome Issue #273306 https://bugs.chromium.org/p/chromium/issues/detail?id=273306
Could it be that problem is the same issue in above link? .. maybe?? or not?.. still I cannot solve this. In my previous work, I used https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css for A4 rendering and it works, but I cannot find whats crucially different so cause the problem.
I've worked with chromes print function in the past and the best way i found to fix these kinds of rendering problems was to brute force it.
Basically change the .page-frame size until it fits.
Although I have to say that your problem seems weird to me since if I remember correctly then the pixel sizes of your .page-frame are inline with what I used.
From the information I can gather from the picture, chrome might be including the margins of .page-frame in to the render. So zero them out forcefully in css.
You could also try to set the "scale" in print options higher to see if that fixes the problem.
For the start, I'd like to introduce might be a rookie problem that there is !important value inside bootstrap.print module.
When you print out, browser using #media print script, yes?
Since I use laravel, hence using webpack, so I generate app.css file that include bootstrap.
During that phase, there are two variables named $print-page-size and $print-body-min-width at the end of node_modules\bootstrap\scss\_variables.css
/* ..(inside node_modules >> bootstrap folder)/_variables.css */
..
// Printing
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
This cause the problem. It's not a bug or any. Well, if you compare the size of actual a4 paper and rendered paper on screen, there might be some difference between those two but it's not a problem. Size is different but result is resemblance.
When you look inside of resource\sass\app.scss file, bootstrap imported after custom scss files like custom or variables.
You can specifiy $print-page-size and $print-body-min-width parameter before importing default bootstrap _print module. When you do that, specified parameter overwrite those value so problem solved. I just set those two value like below.
/* resources/sass/_variables.scss file */
// print
$print-page-size: a4;
$print-body-min-width: auto;
..hey. I sovled!
Related
I Know that internet explorer doesn't play nice with SVGs. I notice that when changing display: block to display: flex does decreases the size of the gap. however it doesn't remove it.
I am declaring height and width in the styles but the issue seems to persist in IE 11
// Declarations
.o-navigation {
align-items: center;
display: flex;
#include font-smooth;
padding: (.5 * $spacing-base) $spacing-base;
.logo-access {
.icon-logo-full {
width: 135px;
height: 23px;
display: block;
#media screen and (min-width: $screen-desktop) {
.home & {
width: 270px;
height: 45px;
}
}
}
}
}
https://github.com/CityOfNewYork/ACCESS-NYC-PATTERNS/blob/master/src/objects/navigation/_navigation.scss
Where might the issue come from?
After using F12 developer tools to check the CSS style, I think the problem is caused by the different rendering way in IE11 that leads to the "o-navigation color-dark-background" having different heights in IE11 and other browsers. You can give the "o-navigation color-dark-background" a specific height value familiar with the value in other browsers. Here I try to set the height value to 52px and then the gap disappears. Like this:
IE doesn't play well with SVGs. The other answer to this post regarding adding the height style to the page does seem to work, and many other post regarding this issue direct to that solution. What did it for me was adding overflow: hidden to the links in the nav.
.nav-inline {
#include typography-nav();
list-style: none;
text-align: $text-direction-end;
flex: 1 1 auto;
margin: 0;
padding: 0;
a {
display: inline-block;
margin-#{$text-direction-start}: 1em;
overflow: hidden;
}
I have a simple HTML page and on that, I have
body, html {
width: 100%;
margin: 0;
padding: 0;
}
#media print {
#page {
size: letter portrait;
padding-left: 5in;
padding-right: 0.25in;
padding-top: 1in;
}
}
However, when I print preview in Chrome, it appears completely unaffected. What do I have to do to get Chrome to recognize the #page and the media query?
I don't think you need the media query because #page is only for print.
Also, according to: https://developer.mozilla.org/en-US/docs/Web/CSS/#page
You can only change the margins, orphans, widows, and page breaks of
the document. Attempts to change any other CSS properties will be
ignored.
Maybe using margins instead of padding would work.
I have a problem with the fact that, when I try to print a page, every link gets the URL between () behind it. I have found multiple questions here, and the solutions work. I have one other problem, on top of that, though: My styles in print.css seem to be ignored after adding a solution.
My CSS
.header-breadcrumb {
margin-top: 0 !important;
}
.nonPrint, hr, .shows-more, #videoGallery{
display: none;
}
.single-event .container .col-md-9 {
width: 70%;
float: left;
}
.single-event .container .col-md-3 {
width: 30%;
float: left;
}
.single-calendar .table-responsive table tbody tr td {
padding: 2px 5px;
}
.single-description {
font-size: 10pt !important;
}
h1 {
font-size: 12pt !important;
}
.printLogo {
display: block !important;
width: 200px;
padding-left: 10px;
}
But when I add
a:after {
display: none;
content: "";
}
the font-sizes get ignored and jumps back to their original values (or so it seems). How do I fix this?
On the left you see the file as it should look like (including a link in the sidebar on the right, which has to be removed), and on the right you see the file with the href removed, but where the all new styles in print.css seem to be ignored.
Disregard what I said before. The difference in styling came from the following:
Because of this CSS, the sidebar has to fill 30%:
.single-event .container .col-md-3 {
width: 30%;
float: left;
}
But since it output a URL which could not be broken until the first -, being 30% wide meant resizing the font (which Chrome did automatically). Hiding the URL made it possible to actually apply the font-size I tried to apply through the CSS, making everything bigger than in the original file, where it actually DIDN'T listen to the CSS.
Facepalm
This might be useful in the future for 2 other people, so I'll leave the question here.
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'
So, Ive come across a problem that I can't seem to figure out the cause of.
I have a few CSS files:
1) styles.css - contains most of the webpage's styling.
2) overlay.css - contains the styling for my overlay.
3) media.css - contains all the media queries.
So far, everything works great and my page acts responsively. However, for some reason, I can't make media queries work with my overlay. Here is my CSS for the overlay in the file overlay.css:
#aboutus {
position: fixed;
background-color: white;
left: 50%;
top: 50%;
width: 800px;
height: 450px;
margin-left: -400px;
margin-top: -225px;
border-radius: 20px;
z-index: 9999;
}
Here is my media query in media.css:
#media screen and (max-width: 700px) {
#aboutus {
background-color: red;
}
}
At the moment this query has no effect whatsoever. The weird thing is, if I put the query under the code in overlay.css instead, it does work 100%.
Why is this so?
Thanks.
How do you load your css? Your media css should be on last after styles & overlay.css