Below is the code that was put together by my developer but we’re still having problems printing uniformly from http://sandboxalleninvestments.com/person/keith-albritton/. It prints fine when printing as a PDF but outside of that, it’s all wonky. I’m out of time and running out of hair to pull out. On some printers it works on some days, on other it does not.
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
// $post_id = get_the_id();
?>
<style>
@media print {
.container {
width: 100%;
}
.bio__content {
max-width: none;
}
.bio__content p {
font-size:16px !important; }
}
.subheader--bio .tabelize__content h1 {
font-size: 35px !important;
}
.bio__content hr {
margin:0;
}
.bio__content p {
padding:0 30px;
}
} /* @media print */
</style>
<div class="subheader subheader--bio">
<img src="<?php the_field("bio_picture"); ?>" alt="">
<div class="container">
<div class="tableize tableize--middle">
<div class="tableize__cell">
<div class="tabelize__content">
<?php
$first_name = get_field('first_name');
$last_name = get_field('last_name'); ?>
<h1><?php echo $first_name . " " . $last_name ?></h1>
<small><?php the_field('job_title'); ?></small>
</div>
</div>
</div>
</div>
</div>
<main class="main main--inner main--border">
<div class="container">
<div class="bio__content">
<div class="bio__bar">
<ul class="socials list--nostyle">
<?php if (get_field('facebook')) : ?>
<li>
<a href="<?php the_field('facebook'); ?>"><svg role="img" class="icon icon--fb"><use xlink:href="<?php echo get_template_directory_uri() . '/icons/icons.svg#icon-fb' ?>"></use></svg></a>
</li>
<?php endif; ?>
<?php if (get_field('instagram')) : ?>
<li>
<a href="<?php the_field('instagram'); ?>"><svg role="img" class="icon icon--in"><use xlink:href="<?php echo get_template_directory_uri() . '/icons/icons.svg#icon-in' ?>"></use> </svg></a>
</li>
<?php endif; ?>
</ul>
<?php if(get_field('team')) : ?>
<a href="<?php the_field('team'); ?>" class="link link--lg">View Team Page</a>
<?php endif; ?>
</div>
<?php the_field('description'); ?>
<hr>
<div class="bio__footer">
<a href="" class="link link--lg" onclick="window.print(); return false;">Print Bio</a>
</div>
</div>
</div>
</main>
<?php endwhile; endif; ?>
<?php
get_footer();
?>
Here’s a screenshot of the problem. You can see that the margins are way off and the font doesn’t match the code (size-wise):
