I unfortunately can't comment with this account, so this answer will only be partially helpful. I would prefer to comment to ask for you to actually upload your whole project or at least a snippet of it because "shared layout" isn't exactly a common term, so I'm not totally sure what you mean.

I believe what you're running into is essentially that you have the content you want to print within a whole fancy layout on the page, and you want to disable all the fancy styling and only print (essentially) the information within a certain section. There are two ways to achieve this.

First, it's kind of a lame solution: duplicate the section that you want to print, set the parent container to display:none except on the @media print query. Style that however you'd like. Set the main parent container to display:none in the media query. You'll end up with two versions of the same content, but 1 of those versions will always be completely hidden.

The second option, which is the more technically proficient option but more work, is that you can wrap all of your non-print styling in a @media only screen query. That will disable all styling except your print styling. Here's an example: https://jsfiddle.net/sydneymvo/Lkqu0gwr/4/ you can right-click on the page and select print to see it in action

@media only screen {
  .print {
    background: wheat;
    padding: 1rem;
  }

  .no-print {
    background: lightblue;
    padding: 1rem;
  }
}

@media print {
  .print {
    background: white;
    padding: 4rem;
    border: 10px solid red;
  }
  .no-print {
    display: none;
  }
}

<div class="print">
  <h1>hello world</h1>
</div>
<div class="no-print">
  <p>This shouldn't print</p>
</div>