Why website printed with Chrome is using mobile layout?
Just add this to your style sheets
@media print {
@page {
size: 330mm 427mm;
margin: 14mm;
}
.container {
width: 1170px;
}
}
The Verge isn't using a mobile layout for printing. It's using its own print layout. If you inspect the page whilst emulating a media of print
you'll see a load of media="print"
declarations. This is loaded in through the HTML:
<link href="..." media="print" rel="stylesheet" type="text/css">
If you want a website to look different when printing than it does on mobile, simply specify screen
within your mobile media queries:
@media screen and (max-width: 768px) {
...
}
When printing, the screen
declaration will be ignored, thus completely ignoring your mobile media query.