playthetureen

I tried a different approach, by using the custom logo instead, and deactivating the title and description.
For everybody who searches something similar, here is the CSS code:

@media screen and (max-width: 640px) {
.has-header-media .site-header, .site-header {
  padding: 4em 0em 2em 0em;
  text-align: center;
}
}

This will place the logo over the whole width on small screens.