I am using an application to print the pages in potrait and landscape mode together.some pages are printing in potrait and some are in landscape.Printing the pages either in potrait or landscape looks good.But printing the pages in potrait and landscape together makes the pages with potrait to be congested.
This is the media query am using,
#media print {
html {
max-width: none;
width:100%;
float:left;
}
#nav-wrapper {
display: none;
}
div.pageBreak {
page-break-after: always !important;
}
#page{
size: auto;
margin: 0;
}
.landscape1 {
transform-origin: top left;
transform: translateY(1850px) rotate(-90deg);
overflow-x: hidden;
width: 1850px !important;
}
}
Media Queries offer matching against the device's orientation:
#media print and (orientation: landscape) {
/* landscape styles */
}
#media print and (orientation: portrait) {
/* portrait styles */
}
Work it in this way.
OR
Maybe you can try this custom css which someone tried online.
Here is a right CSS which work in the most browsers (Chrome, Firefox, IE9+).
First set body margin to 0, because otherwise page margins will be larger than those you set in the print dialog. Also set background color to visualize pages.
body {
margin: 0;
background: #CCCCCC;
}
margin, border and background are required to visualize pages.
padding must be set to the required print margin. In the print dialog you must set the same margins (10mm in this example).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
The size of A4 page is 210mm x 297mm. You need to subtract print margins from the size. And set the size of page's content:
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
I use 276mm instead of 277mm, because different browsers scale pages a little bit differently. So some of them will print 277mm-height content on two pages. The second page will be empty. It's more safe to use 276mm.
We don't need any margin, border, padding, background on the printed page, so remove them:
#media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
Note that the origin of transformation is 0 0! Also the content of landscape pages must be moved 276mm down!
Also if you have a mix of portrait and lanscape pages IE will zoom out the pages. We fix it by setting -ms-zoom to 1.665. If you'll set it to 1.6666 or something like this the right border of the page content may be cropped sometimes.
If you need IE8- or other old browsers support you can use -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). But for modern enough browsers it's not required.
You are good to go!!
Related
I'm trying hide scrollbar on mobile. Everything looks well on desktop (no srollbar), but when I check on some android device (ipad) - I can still see grey, thin thumb. Is possible to hide predefined scrollbar from browser.
My code (work well on desktop).
body::-webkit-scrollbar {
background-color: #fff;
}
body::-webkit-scrollbar-thumb {
background-color: #fff;
}
Use -webkit-appearance:none to hide the scrollbar.
::-webkit-scrollbar {
-webkit-appearance: none;
}
Try this
::-webkit-scrollbar {
width: 0px;
background: transparent; /* make scrollbar transparent */
}
This was useful for me.
::-webkit-scrollbar { display: none; }
try this hide's it on screens less than 768px
body{
height: 1000vh
}
#media screen and (max-width: 768px){
::-webkit-scrollbar {
-webkit-appearance: none;
}
}
<p>Yao</p>
None of the previous answers worked for me. I had to add:
main {
overflow: hidden;
}
Then on mobile view through the browser there was no scroll bar to the right, but the scroll functionality still works.
I'm developing a login form and I'm having difficulties in cross browser rendering.
When I use Chrome everything is displayed as it should be and the footer on the login form is where it should be. However when I open the login form with Firefox, the footer is not where it should be e.g at the bottom of the login form.
I want to add a <hr> which will only be displayed when the form is opened in Firefox browser and the width of the display is higher than 768px. It shouldn't be displayed in other browsers like Chrome, Safari, etc.
I'm using jade/pug and bootstrap for the front end and css to apply certain rules to the form.
My code is below.
Jade/Pug:
hr.div_buttons_ff
.col-md-12.col-lg-12.col-xl-12.col-sm-12
footer.footer_desk
hr.div_footer
p.no_acc_desk Don't Have an account ?
a.join_now_desk(href="#") Join now.
CSS:
#media screen and (min-width:768px) and (-moz-document)
{
.div_buttons_ff
{
padding: 1px 0px 1px 0px;
border: none;
outline: none;
clear: both;
}
}
I also tried with nested media query like the following:
#-moz-document url-prefix()
{
#media screen and (min-width:768px)
{
.div_buttons_ff
{
padding: 1px 0px 1px 0px;
border: none;
outline: none;
clear: both;
}
}
}
Also I tried nesting the -moz-document url-prefix() into media but again with no success.
I'm printing an HTML receipt via javascript:window.print()
Printing it to an Inkjet Printer makes everything all good. However on DOT-MATRIX Printer, Epson LX-300+II everything is different. It doesn't fit right, the texts are not aligned. I tried saving it to PDF and printing the PDF from Adobe Reader, the orientation seemed to be all good.
I already set the page size and tried resizing the fonts, but still I can't print it correctly. The Receipt's size, by the way, is 8.5 x 5.5in.
I tried formulating the CSS, but failed to get the correct result.
This is the CSS:
#media print {
html, body {
width: 8.5in;
height: 5.5in;
display: block;
font-family: "Calibri";
font-size: auto;
}
#page
{
size: 5.5in 8.5in;
}
}
Also whenever I tried adding #page { size: 8.5in 5.5in.; size: Portrait; } the printed paper is on landscape.
How can I set things right?
EDIT:
I tried
#page {
size: 5.5in 8.5in;
}
but it's printing the page on Landscape...
Solved the Problem!
In my Printer(LX-300-II), I defined a Paper Size which width is 8.5in and 5.5in in height. There is also a change in CSS Code:
#media print {
html, body {
display: block;
font-family: "Calibri";
margin: 0;
}
#page {
size: 21.59cm 13.97cm;
}
.logo {
width: 30%;
}
}
Since I have images in my Receipt, I made some width adjustments to fit it just right.
I hope this can help those people who is encountering this same problem.
You are using the size and height the wrong way around in #media print, try this:
#media print {
html, body {
width: 5.5in; /* was 8.5in */
height: 8.5in; /* was 5.5in */
display: block;
font-family: "Calibri";
/*font-size: auto; NOT A VALID PROPERTY */
}
#page {
size: 5.5in 8.5in /* . Random dot? */;
}
}
This Problem may come based on the Browser setup or Paper size setup. Check your browser font setting and paper size in printing properties.
I'm looking for a way to show/hide content for an email newsletter based on the device the customer is opening the email on.
I've currently got this snippet of code in the head section:
#media only screen and (max-width: 480px) {
#mobile { display: block; } /* show it on small screens */
#normal { display: none; } /* hide it elsewhere */
}
#media only screen and (min-width: 481px) {
#mobile { display: none; } /* hide it elsewhere */
#normal { display: block; } /* show it on large screens */
}
Along with:
<div id="mobile">content</div> or <div id="normal">content1<div>
This works fine if I was using it for web, I can scale my browser window and content appears/disappears based on the width of the window, but as soon as I send a test through our email system it works fine on mobile but breaks down on desktop (Gmail).
And because this is an email I can't utilise javascript so it all needs to be html/css.
Anything I'm doing wrong or missing?
I feel your pain. Showing and hiding content in html email newsletters was eluding me for ages!
/* Hide on Desktop */
.hide-desktop {
/* non-gmail */
display: none;
/* gmail */
font-size: 0;
max-height: 0;
line-height: 0;
/* outlook */
mso-hide: all;
/* optional, required only if you're using padding */
padding: 0;
}
#media (max-width: 480px) {
.hide-desktop {
display: block !important;
font-size: 12px !important;
max-height: none !important;
line-height: 1.5 !important;
}
}
/* Hide on Mobile */
#media (max-width: 480px) {
.hide-mobile {
display: none;
max-height: 0;
}
}
NOTE: Don't forget to inline the .hide-desktop rule, that is outside of the media query.
So using media queries and a number of hacks we can do a bullish hide all for desktop and then undo it media queries. Inversely, because mobile clients have decent support for media queries, we can hide the mobile content with media queries alone. The outlier, gmail, just gets the desktop view – which is unfortunate but still useable.
EDIT : read further then the next 5 lines! My problem is not the logic of doing different css for mobile, tablet and desktop (#media query) - the problem is to change the IMAGE.SRC attribute FROM INSIDE CSS.
I'm trying to make a new fluid website and I'm trying to create 3 different header images:
Mobile header image (low res)
Tablet header image (medium res)
Desktop header image (high res)
(all the images also vary in aspect ratio)
How do I get this to work?
Currently I've tried to simply change the SRC in CSS for each CSS SECTION (mobile, tablet, desktop)
Like this:
#img_header {
src: url(img/header_m.png);
}
We all know that this doesn't work :D also I don't want to use background-image instead.
What is the proper way to do this?
Should I hack into the generated javascript code from Adobe Dreamweaver CS6 and change the .src from there ?
I'm sure there is a css way, so tell me guys. Thanks
UPDATE: I should have said that I already use media queries...
Here is my css:
/* Layout für Mobilgeräte: 480 px oder weniger. */
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 97.826%;
padding-left: 1.0869%;
padding-right: 1.0869%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_m.png);
}
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
#media only screen and (min-width: 481px) {
.gridContainer {
width: 93.451%;
padding-left: 0.7744%;
padding-right: 0.7744%;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header_t.png);
}
}
/* Desktoplayout: 769 bis maximal 1232 px. Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
#media only screen and (min-width: 769px) {
.gridContainer {
width: 89.1614%;
max-width: 1232px;
padding-left: 0.4192%;
padding-right: 0.4192%;
margin: auto;
}
#div_header {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
#img_header {
src: url(img/header.png);
}
}
NOW that you have read everything, you should imagine that I can't change the img.src from inside css..., I think the only way to do so is to hack into the unformatted auto generated javascript from adobe DW cs6, isn't it ?
You can use CSS3 media queries for your desired results.....
And I think you should read this article it will help you :-
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
You can do different images by using media queries
Mobile
#media only screen and (min-width : 320px) and (max-width : 480px) {
Your image for mobile
}
Tablet
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
Your image for tablet
}
If you are using single image in diff resolution then you need not to do take 3 images. Take the bigger image (for desktop size) and write the below css
<header><img src="img/header_m.png" /></header>
CSS
header img{max-width:100%}
I believe you are aware of media queries http://css-tricks.com/css-media-queries/
To change foreground image
If you want to change foreground images for different devices then try z-index
.header{
background-color:red;
position:relative; height:auto}
img:first-child{
position:absolute; top:0; left:0;
z-index:-1; width:200px
}
img{
position:absolute; top:0; left:0;
z-index:10; width:200px
}
Change the z-index value for respective device width.
Demo here http://jsfiddle.net/5vpG7/70/
......................
Now used to media query css
#media screen and (min-width: 500px) and (max-width: 800px) {
// your css code here
}
more info about this
i've now set another div inside the div_header, and give that child div a background image and a hardcoded width and height ( matches the individual images ), so i've faked a tag that now have ability to define (backgound-) image source via css instead of defining attribute of image source ;)
thanks anyway for your answers