e-Boks is a Danish provider of a digital inbox solution, where the public authorities and private sector companies can send messages to citizens or customers, typically as PDF documents. From the inbox these documents are opened in a fullscreen viewer.

However, the whitespace in the chrome of this viewer is taking up way too much precious screen real estate, thus hiding quite a large amount of the actual content.


e-Boks PDF viewer – original design:

E-boks Original - not so much content visible

After quick redesign

Luckily, with a quick CSS fix, this whitespace can be minimized, as seen here:

E-boks Maximized Content Visibility

If you have e-Boks, try it out yourself in Google Chrome:

  1. Get the Stylebot Chrome extension
  2. Go to your personal e-Boks
  3. Open Stylebot and click the "Edit CSS" button
  4. Paste in the following CSS and click Save:

   Go to your personal e-Boks
   Then try paste this CSS into Stylebot Chrome extension: 

#CloseModal {
    background-color: #eee;

#mailTitle {
    font-size: 16px;

.elements-wrapper {
    margin-bottom: 0;

.fullScreen .viewDocument .content {
    padding-bottom: 0;

.ng-modal-dialog.fullScreen .modalContent {
    padding: 0;

.ng-modal-dialog.fullScreen .modalContent .viewDocument .controls {
    margin-bottom: 0;

.ng-modal-dialog.fullScreen .modalContent .viewDocument .elements-wrapper .modalHeader {
    margin-bottom: 3px;
    margin-top: 1px;
    padding: 0;

.viewDocument .controls .control-item {
    padding-bottom: 6px;
    padding-top: 4px;

.viewDocument .controls .control-item a em {
    top: 6px;


html-css redesign-case ux-critique

Related posts