I have a visual bug when rendering my website in PDF. As you can see on the screen shot there is a shift in the images. But on the html rendering this shift is not present.
the link of the website to be transformed: https://betterhost-3fadc.web.app/
<article>
<div class="container"><img
src="https://www.electrodepot.fr/fstrz/r/s/www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P939881.jpg?frz-v=2690"><img
src="https://www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P959338.jpg"><img
src="https://www.alinea.com/fstrz/r/s/www.alinea.com/dw/image/v2/BCKM_PRD/on/demandware.static/-/Sites-ali_master/default/dwb3523209/images/27339299/POUBELLE-DAYA-27339299-F-1.jpg?sw=982&sh=982&sm=fit&sfrm=png&bgcolor=eef1eb&frz-v=103"><img
src="https://cdn.sklum.com/fr/1172047/distributeur-de-savon-en-verre-ovie.jpg"><img
src="https://www.alinea.com/fstrz/r/s/www.alinea.com/dw/image/v2/BCKM_PRD/on/demandware.static/-/Sites-ali_master/default/dw32eea630/images/27258507/BROSSE-WC-SPINA-27258507-F-1.jpg?sw=982&sh=982&sm=fit&sfrm=png&bgcolor=eef1eb&frz-v=103"><img
src="https://www.electrodepot.fr/fstrz/r/s/www.electrodepot.fr/media/catalog/product/cache/1a40d1f945549a9ec18309b0a600e55c/P963865.jpg?frz-v=2690"><img
src="https://cdn.sklum.com/fr/1172188/gobelet-en-verre-ovie.jpg"></div>
<cactus>
Each page is in a block called article.
article {
position: relative;
display: flex;
width: 827px;
height: 1170px;
overflow: hidden;
margin: 0px;
}
The images are arranged in 2 columns via this CSS code:
.container {columns: 2;width: 50%;column-gap: 0px;height: auto;}
Web:
PDF:
You need a dedicated print style sheet to make reliable PDFs. use a media query to make a style sheet for print. In your markup have everything for one sheet of a4 in a container called something like .page. Then in your print style sheet, explore using #page to format the pdf.
in print.css
.page {
page-break-inside: avoid;
}
That should stop your layout within your class="page" container from breaking across two pages. Experiment with using real dimensions in your print style sheet to make everything fit on one page as you want. You can see what your pdf is going to look like by doing ctrl+p to see the print preview, or actually saving to pdf from chrome.
That should start you in the right direction.
EDIT: some other pointers
put this to take the default margins off when printing
#page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
Set your page container to nearly the size of the page you want to print
.page {
width:209mm;height:296mm;background-color:#fffffe;position:relative;border:1px solid transparent
}
Related
My content in the print preview window is displaying down about 5 or 6 lines.
Since I've already dealt with height, margin & padding, I'm unsure what's keeping it down. I can't check with inspect because it's inside a print preview window. I'm just experimenting with a few things so no rush. I will post an answer if I figure it out.
JS - called from onclick();
function print1() {
window.print();
}
CSS
#media print{
body *:not(#OFP_here){
visibility: hidden;
height:0px;
margin: 0px;
padding: 0px;
}
Update: 3 lines are due to a table that gets built by JS, even though I have accounted for the table in #media.
visibility: hidden; will "hide" those elements in the sense that their contents are hidden. But the space they occupy without that rule will still appear as empty space, which I suppose is what you are referring to.
Use display: none instead, which will actually hide the affected elements and not leave any empty space.
You need to target the #page which will be what modifies the global page settings. You can read more about it here at MDN
#page
The #page CSS at-rule is used to modify some CSS properties when printing a document.
Syntax
#page {
margin: 1cm;
}
We use a custom template page in wordpress for a narrow width page. My goal is for it to appear as 600px wide + padding of 50px on each side (or so).
This is an example of a page that works on both desktop and mobile:
[edit: removed link]
This is the page with an issue: [edit: removed link] -- it looks correct on desktop, but on mobile isn't scaling down the width. I've tried removing what I thought were likely culprits: the youtube video, reuploading all images w/ 600px width (instead of wordpress resizing), and still having trouble.
Thank you.
Start with this:
Line 6 of main-41ab33da.css
Change "inline-block" to "block", like here
.page-template-template-narrow .narrow-landing-page {
background-color: #fff;
display: block;
padding: 0 25px;
}
Next, add "max-width" to form (see code) and yellow block (inline styles, as you don't have any selector for it)
#lead-capture {
max-width: 100%;
}
Finally do same for youtube iframe you have and you're good
iframe {
max-width: 100%;
}
I am trying to make a Asp.net website, The homepage design is a single page portfolio style; by having each or "projects" as 100% height of the view port underneath each other allowing me to use anchor tags. My problem is that when I am using the tag it messes up my css and does not work properly so how can I fix this?
I have tried the following:
/* in CSS*/
html, body{
height:100%;
width:100%;
}
And I have added the height 100% tag to each of the parent divs and or elements of the divs I want to be 100% but still no luck. I am out of options!
I can't post the full code because it is way to long and I am on a different computer to my one with code.
I think I understand what you're asking, but I'm not completely sure, nor am I sure where the DOCTYPE, anchors or ASP.NET come into play.
Here's a demo of a full page document, with a few full screen child divs.
html,
body {
height: 100%;
width: 100%;
}
body {
overflow: auto;
}
div {
width: 100%;
height: 100%;
}
Please keep in mind that percentage heights can become a headache really fast, so you need to understand exactly what you are doing.
Also note, this page is running Normalize.css which fixes browser discrepancies.
My page I'm working on is at http://www.derekbeck.com/1775/excerpts/
It looks all fine in desktop browsers, but on mobile screenshots, like below, it is forced to wrap. (see below the image for my questions...)
(full sized image)
I've tried to make it wrap gracefully, but I have two questions:
1) Is there some CSS way to control how the div inline-block (class="exnote2") Want the entire chapter?<BR>Sign up for the newsletter! wraps?
Specifically, I want:
1a) that padding-left: 20px; on the left side of it to be non-existent if it is on a second line as below (but it is necessary to keep it 20px from the PDF icon if it is indeed all on one line),
1b) some whitespace above the div inline-block (class="exnote2"), so that it is not so close to the "Read Online" icon. If I add padding-top or margin-top however, it effects the nice layout for the desktop version (linked above).
For what it's worth, for 1b) above, I did jury-rig a solution together for the entire inline block that follows the image, the entire div inline block that contains text (class="exitemdetails"). I did it this way:
.exitemdetails {
margin-left: 25px;
/* The following allows for graceful wrapping for mobile phones */
padding-top: 20px;
position: relative;
top: -10px; /* half the padding-top */
}
I could jury-rig something for the Want the entire chapter?<BR>Sign up for the newsletter! line too, but I suspect under different conditions it would not display as I hoped. Hence, I post here hoping for a better, more elegant solution, namely, how to use CSS to control the way div's wrap, and the spacing between them only if they do wrap.
2) I have one other question related to this: is there no simple CSS way to shrink that book cover image down when there is not space enough? I tried this, but it does nothing:
.eximage {
width: auto;
height: auto;
}
.eximage img {
max-width: 100%;
height: auto;
}
Thanks for looking!
Derek
Have you considered using css media queries to change the layout of your page at different screen sizes? Might be worth a shot.
http://www.w3.org/TR/css3-mediaqueries/
When attempting to print the following web page in IE7 (or IE8 compatibility mode), some content (the bottom two questions) is truncated. You can view the issue in Print Preview.
http://www.testdesigner.com/tests/print.jsp?testId=4097
Removing the float in the following css block found in printTestTwoColumns.css will fix the issue, but also remove the double column formatting.
.question {
float: left;
width: 44%;
padding: 0;
margin-right: 0;
}
It's important to note that the HTML in the URL above is dynamically generated and the problem exists with all types of content, including pure text (no images). The content always overflows off the page.
Short of changing the markup to a table based layout, does anyone have a possible solution?
Try adding a print stylesheet that uses a much simpler layout designed for narrow printing on paper. You probably won't need any floats at all.
with FLOAT IE tends to add a addition 10PX padding even though you are stating padding:0.
Try adding display:inline ie
.question { float: left; width: 44%; padding: 0; margin-right: 0; display:inline }
Hope this helps.