Why website printed with Chrome is using mobile layout?
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.
Just add this to your style sheets
@media print { @page { size: 330mm 427mm; margin: 14mm; } .container { width: 1170px; }}