Andrus Andrus - 4 months ago 9
CSS Question

How to remove left column when printing in landscape mode

Bootstrap 3 shopping cart contains product tree in left side and product images in right side:

<body>
<div class="container">
<section class="row">
<!-- Left column: product tree -->
<div class="col-lg-3 col-md-4 col-sm-5">
<div id="LeftPane" class="site-leftpane custom-collapse">
<button class="collapse-toggle visible-xs" type="button" data-toggle="collapse" data-parent="custom-collapse" data-target="#side-menu-collapse">
<span class="">Tootepuu</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<ul class='tree list-group collapse' id="side-menu-collapse">


<li>
<a href="/Store/Category?category=1">Product tree item 1</a>
</li>

<li>
<a href="/Store/Category?category=1">Product tree item 2</a>
</li>
...
</div>
</div>
</div>

<!-- right column: product images -->
<div class="col-lg-9 col-md-8 col-sm-7">
<div class="site-maincolumn">
...


If printed from Chrome in landscape mode, there are only two product image columns and empty space appears in left side.

How to remove empty space in left so that product images appear in this area ?
If printed using portrait orientation everything is OK: four product image columns appear and there is no empty space.

Update

according to pbenard comment I added
hidden-print
class to left column

<div class="col-lg-3 col-md-4 col-sm-5 hidden-print">


This only makes two image columns centered.

How to print more image columns in landscape mode ?

Answer

You can create a special class to make the column wider during the printing.

For example: http://glebkema.ru/tasks/so-38413455.html

@media print {
  .col-print-12 {
    width: 100% !important;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-5 hidden-print">
      <img src="//placehold.it/450x450/c69/f9c/?text=Left" width="100%" alt="">
    </div>
    <div class="col-lg-9 col-md-8 col-sm-7 col-print-12">
      <img src="//placehold.it/900x300/69c/9cf/?text=Right" width="100%" alt="">
    </div>
  </div>
</div>

Comments