How to print my Bootstrap page as it appears online.
This is my first Bootstrap website, and everything works the way I need it to except the printed version. I'm in the process of making the website responsive, but just can't find anything online to print it properly.
The CSS file is interesting to say the least. The order is strange but important (for some unknown reason).
If the CSS is included inside the HTML file, the print preview displays the content larger (around 3 pages), the .contact-links and .contact-links2 classes showcases the text properly, and if "Background graphics" is checked in the print options panel, .jumbotron-special class displays the correct grey backdrop, but isn't vertically centered, and the <strong> text is in black where it should all be white.
If the CSS is linked to the HTML, the page fits mostly on one page with the footer hanging on the second page. The .contact-links and .contact-links2 text isn't formatted, the .jumbotron-special class doesn't display the grey backdrop at all, and all the text is black and larger. See css-in-html.jpg.
I suspect that the printout is for some reason displaying at a smaller, narrower screen, which isn't currently fixed in respect to the CSS media queries. I'd like if the links didn't show the URL link and the logos/icons weren't skewed.
See css-linked-to-html.jpg.
I need it to print out exactly like it appears online at full - 3/4 width.
You can download the source files here: https://drive.google.com/open?id=0B7SM5Lky-I-WakhyWjFyUkdab1k
And for Mac users there is a zipped file attached.
css-in-html.jpg
css-linked-to-html.jpg
Website-Files.zip
The CSS file is interesting to say the least. The order is strange but important (for some unknown reason).
If the CSS is included inside the HTML file, the print preview displays the content larger (around 3 pages), the .contact-links and .contact-links2 classes showcases the text properly, and if "Background graphics" is checked in the print options panel, .jumbotron-special class displays the correct grey backdrop, but isn't vertically centered, and the <strong> text is in black where it should all be white.
If the CSS is linked to the HTML, the page fits mostly on one page with the footer hanging on the second page. The .contact-links and .contact-links2 text isn't formatted, the .jumbotron-special class doesn't display the grey backdrop at all, and all the text is black and larger. See css-in-html.jpg.
I suspect that the printout is for some reason displaying at a smaller, narrower screen, which isn't currently fixed in respect to the CSS media queries. I'd like if the links didn't show the URL link and the logos/icons weren't skewed.
See css-linked-to-html.jpg.
I need it to print out exactly like it appears online at full - 3/4 width.
You can download the source files here: https://drive.google.com/open?id=0B7SM5Lky-I-WakhyWjFyUkdab1k
And for Mac users there is a zipped file attached.
css-in-html.jpg
css-linked-to-html.jpg
Website-Files.zip
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.