We’ve come a long way in the past few weeks already, but we’ve still got seven more mockups to go. This week we’ll be focusing on the portfolio detail, testimonial and blog archive pages.
Other Posts In This Series
Portfolio Detail
The portfolio detail page is pretty simple. We’ve got a large image to the left, and some details on the right. This should be super easy to turn responsive, right? On the single-portfolio.php, I’ve coded up the basic layout:
<?php get_header(); ?>
<div class="container">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<section id="heading">
<h1><?php the_title();?></h1>
<?php if($myImageFileName = get_post_meta($post->ID, 'Website', true)){ ?><p>Website: <a title="View <?php the_title();?>" href="<?php echo get_post_meta($post->ID, 'Website', true);?>" target="_blank"><?php echo get_post_meta($post->ID, 'Website', true);?></a></p><?php } ?>
</section>
<?php the_post_thumbnail('portfoliodetail');?>
<section id="details">
<?php the_content();?>
</section>
<?php endwhile; wp_reset_query(); ?>
</div>
<?php get_footer(); ?>
First we’ll need to apply some simple styles. The section#heading has already been made responsive from last week, but we’ll need to float the link to the right.
.single-portfolio #heading h1 { float: left; }
.single-portfolio #heading p { float: right; font-weight: bold; }
For the featured image, we need to pull the URL out without WordPress sticking height and width attributes on it, so we can resize at will. Replace the standard the_post_thumbnail with:
<?php
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'full');
$image_url = $image_url[0];
?>
<img src="<?php echo $image_url;?>" alt="View <?php the_title();?>" class="wp-post-image">
.single-portfolio .wp-post-image { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; padding: 1.5%; max-width: 60.416667%; }
The details section to the left is then sized with the leftover percentages and prettied up:
.single-portfolio #details { float: right; width: 34.490605%; }
.single-portfolio #details h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; clear: both; margin-top: 0; padding: 20px 0 15px; }
.single-portfolio #details ul { margin: 0 0 20px; padding: 0; }
.single-portfolio #details li { background: url('images/li1.jpg') no-repeat; font-size: .75em; list-style: none; margin-bottom: 3px; padding-left: 15px; }
.single-portfolio #details li:nth-of-type(3n+2) { background: url('images/li2.jpg') no-repeat; }
.single-portfolio #details li:nth-of-type(3n+3) { background: url('images/li3.jpg') no-repeat; }
.single-portfolio #details .highslide img { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; height: auto !important; margin: 0 3% 15px 0; padding: 1.8%; width: auto !important; max-width: 26.470588%; }
Checking in mobile devices, it actually looks pretty good already. We just need to clear and center the info in the heading on the iPhone, make the main image full width of the screen, as well as the details so they’re stacked.
@media only screen and (max-width: 480px) {
.single-portfolio #heading * { clear: both; text-align: center; width: 100%; }
.single-portfolio .wp-post-image { max-width: 97%; width: 97%; }
.single-portfolio #details { margin-top: 30px; width: 100%; }
}
For IE, we’ll just need to provide the regular fallbacks for the multiple backgrounds and RGBa borders. We’ll go ahead and add them to the list of fallbacks we’ve already made:
.no-multiplebgs #heading { background: url('images/divider.png') no-repeat center bottom; }
.no-rgba .items img, .no-rgba .single-portfolio #details .highslide img, .no-rgba .single-portfolio .wp-post-image { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }
Testimonials
The testimonials template is the easiest of all. All we need is some very simple HTML
<?php get_header(); ?>
<div class="container">
<section id="heading">
<h1>Client Testimonials</h1>
<p>What my clients think of me and my work…<a title="Contact Freelance Web Developer" href="<?php bloginfo('siteurl');?>/contact">Ready to work together?</a></p>
</section>
<article>
<?php query_posts('post_type=clients&posts_per_page=-1'); if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<p><?php the_content();?></p>
<p><strong><?php the_title();?></strong></p>
<?php endwhile; wp_reset_query(); ?>
</article>
</div>
<?php get_footer(); ?>
The rest of the CSS is all presentational, just set the article to 100% for the width.
.tax-clients article { background: rgba(238,142,104,.5); border: 1px solid rgba(103,51,24,.5); float: left; margin-bottom: 10px; padding: 1.25%; width: 97.5%; }
.tax-clients article p:nth-of-type(2) { font-weight: bold; padding: 0; }
Then all we need to do is provide a simple IE fallback for the backgrounds and borders.
.no-rgba .tax-clients article { background: rgb(238,142,104); border: 1px solid rgba(103,51,24); }
Blog
The blog section is a bit more complicated, as we have a main content area and a sidebar to deal with.
<?php get_header(); ?>
<div class="container">
<section id="heading">
<h1>The Blog</h1>
</section>
<article id="blog">
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<section>
<h2><a title="<?php the_title();?>" href="<?php the_permalink();?>"><?php the_title();?></a></h2>
<?php wpe_excerpt('wpe_excerptlength_index', 'wpe_excerptmore'); ?>
<a class="btn" title="Read <?php the_title();?>" href="<?php the_permalink();?>">Read more…</a>
</section>
<?php endwhile; wp_reset_query(); ?>
<?php wp_pagenavi(); ?>
</article>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>
The main content area is 77.604167% wide and the aside is 21.041667% wide. If you float the aside to the right, you don’t have to worry about calculating the margins between those. The widgets themselves need a padding of 15px, so divided from 201, we get 7.4257426% padding and a width of 85.074627%.
The rest is simple CSS!
.category #heading h1 { margin-bottom: 10px; }
.category #blog { float: left; width: 77.604167%; }
.category #blog section { background: url('images/divider.png') no-repeat center bottom; float: left; width: 100%; }
.category #blog h2 a { background: url('images/blogTitle.jpg') no-repeat left center; color: #222; text-transform: none; padding: 2px 0 0 65px; }
.category #blog h2 a:hover { color: #68a1a0; }
.category #blog .btn { background: #ee8e68; border: 1px solid #e5763d; color: #fff; float: left; font-size: .8125em; margin-bottom: 25px; padding: 6px 30px; }
.category #blog .btn:hover { background: #a5cecd; border-color: #68a1a0; }
aside { float: right; width: 21.041667%; }
aside h2 { font-size: 1em; }
aside > ul > li { list-style: none; margin-bottom: 15px; padding: 7.4257426%; width: 85.074627% }
aside ul ul { margin: 0; padding: 0; }
aside input[type=text] { border: 1px solid rgba(183,91,43,.2); font-size: .8125em; font-style: italic; padding: 2%; width: 96%; }
.wp-pagenavi { float: left; font-size: .8125em; margin-top: 20px; width: 100%; }
.wp-pagenavi .pages { float: left; font-weight: bold; padding: 5px 15px 0 0; }
.wp-pagenavi a, .wp-pagenavi .current { background: #ee8e68; border-radius: 12px; color: #fff; float: left; font-weight: normal; height: 20px; margin-right: 5px; padding-top: 3px; text-align: center; width: 23px; }
.wp-pagenavi a:hover { color: #222; }
.wp-pagenavi .current { color: #222; font-weight: bold; }
.wp-pagenavi a:nth-of-type(3n+2) { background: #e5763d; }
.wp-pagenavi a:nth-of-type(3n+3) { background: #a5cecd; }
Now it’s time for device check, you know the drill! Again the iPhone is a little squished, so I’m just going to hide the sidebar, since I don’t think anyone will be interested in the sidebar when coming on an iPhone.
@media only screen and (max-width: 480px) {
#blog { width: 100%; }
aside { display: none; }
}
Check in IE7 shows we have a few browser bugs. Mainly, the triple circles in the title are being cut off and the read more button is on top of the divider line. The button issue is easily fixed, simply remove the margin from the button and add it as padding to the div with the divider. The h2 a simply needed a display: block and it’s good to go. All the other IEs look great now as well.
Now we’ve come to the end of Part 4, here’s what our total CSS looks like:
/*
Theme Name: Amber Circles
Description: This theme is a combination of Hijinks (www.amberweinberg.com) and HTML5 Boilerplate (http://html5boilerplate.com/)
Author: Amber Weinberg
Author URI: http://www.www.amberweinberg.com.com/
*/
/*****HTML5 BOILERPLATE MINIFIED*******/
article{display:block}aside{display:block}details{display:block}figcaption{display:block}figure{display:block;margin:0}footer{display:block}header{display:block}hgroup{display:block}nav{display:block}section{display:block}audio{display:inline;zoom:1}canvas{display:inline;zoom:1}video{display:inline;zoom:1}audio:not([controls]){display:none}[hidden]{display:none}html{font-size:100%;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{font-size:13px;line-height:1.231;font-family:sans-serif;color:#222;margin:0}button{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;cursor:pointer;-webkit-appearance:button;margin:0}input{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;line-height:normal;overflow:visible;margin:0}select{font-family:sans-serif;color:#222;font-size:100%;vertical-align:middle;margin:0}textarea{font-family:sans-serif;color:#222;font-size:100%;overflow:auto;vertical-align:top;resize:vertical;margin:0}::-moz-selection{background:#f8e8c0;color:#222;text-shadow:none}::selection{background:#f8e8c0;color:#222;text-shadow:none}a:focus{outline:thin dotted}a:active{outline:0}abbr[title]{border-bottom:1px dotted}b{font-weight:700}strong{font-weight:700}blockquote{margin:1em 40px}dfn{font-style:italic}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}ins{background:#ff9;color:#000;text-decoration:none}mark{background:#ff0;color:#000;font-style:italic;font-weight:700}pre{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em;white-space:pre-wrap;word-wrap:break-word}code{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}kbd{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}samp{font-family:monospace, monospace;_font-family:'courier new', monospace;font-size:1em}q{quotes:none}q:before{content:none}q:after{content:none}small{font-size:85%}sub{font-size:75%;line-height:0;position:relative;vertical-align:baseline;bottom:-.25em}sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;top:-.5em}ul{margin:1em 0;padding:0 0 0 40px}ol{margin:1em 0;padding:0 0 0 40px}dd{margin:0 0 0 40px}nav ul{list-style:none;list-style-image:none;margin:0;padding:0}nav ol{list-style:none;list-style-image:none;margin:0;padding:0}img{border:0;-ms-interpolation-mode:bicubic;vertical-align:middle}svg:not(:root){overflow:hidden}form{margin:0}fieldset{border:0;margin:0;padding:0}label{cursor:pointer}legend{border:0;margin-left:-7px;padding:0}table button{overflow:auto}table input{overflow:auto}input[type="button"]{cursor:pointer;-webkit-appearance:button}input[type="reset"]{cursor:pointer;-webkit-appearance:button}input[type="submit"]{cursor:pointer;-webkit-appearance:button}input[type="checkbox"]{box-sizing:border-box}input[type="radio"]{box-sizing:border-box}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner{border:0;padding:0}input::-moz-focus-inner{border:0;padding:0}input:invalid{background-color:#f0dddd}textarea:invalid{background-color:#f0dddd}table{border-collapse:collapse;border-spacing:0}td{vertical-align:top}
/****BODY STYLES********/
body { background: url('images/bkg.jpg') #FFF; color: #222; font: 100% Droid Sans, Arial, sans-serif; }
p { font-size: .8125em; line-height: 1.55em; margin: 0; padding-bottom: 15px; }
h1, h2 { font-size: 1.125em; text-transform: uppercase; }
h3 {}
a { color: #e5763d; font-weight: 700; text-decoration: none; }
a:hover { color: #68a1a0; }
.container { clear: both; margin: 0 auto; max-width: 960px; padding: 0 3%; }
/****HEADER STYLES*******/
header { border-top: 5px solid #222; float: left; margin-bottom: 15px; padding-top: 15px; width: 100%; }
header .container > a, header li { float: left; }
/*****NAV STYLES*******/
header .container > a:hover { opacity: .8; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul { float: right; padding: 5px 0 0; }
header li { list-style: none; padding: 0 10px; }
header li a { color: #222; font-size: .9375em; }
header li.current-menu-item a { font-weight: 700; text-decoration: line-through; }
header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { padding: 0; position: relative; top: -5px; }
header li.menu-item-4780 a, header li.menu-item-4782 a, header li.menu-item-4781 a, header li.menu-item-4783 a { background: url('images/iconTW.jpg') no-repeat; float: left; height: 27px; margin-left: 5px; text-indent: -1000000px; width: 28px; }
header li.menu-item-4780 a { margin-left: 20px; }
header li.menu-item-4782 a { background: url('images/iconFB.jpg') no-repeat; }
header li.menu-item-4781 a { background: url('images/iconDR.jpg') no-repeat; }
header li.menu-item-4783 a { background: url('images/iconVC.jpg') no-repeat; }
header ul:hover li a { opacity: .3; -webkit-transition: opacity .5s ease; -moz-transition: opacity .5s ease; transition: opacity .5s ease; }
header ul:hover li a:hover { color: #222; font-weight: 700; opacity: 1; }
.no-rgba header ul:hover li a { color: #dee1be; }
.no-rgba header ul:hover li a:hover { color: #222; font-weight: 700; }
.ie7 header li.menu-item-4780 a { margin-left: 0; }
/*****FOOTER STYLES*******/
footer { background: #222; color: #fff; float: left; margin-top: 50px; padding: 15px 0; width: 100%; }
footer li { float: left; list-style: none; margin-right: 5.9375%; }
footer #text-14 { width: 26.5625%; }
footer #text-14 a { background: url('images/arrowBlue.jpg') no-repeat right; display: inline-block; padding-right: 20px; }
footer #text-15 { width: 20%; }
footer #text-15 p { color: #ee8e68; font-weight: bold; line-height: 2em; }
footer .widget_twitter_vjck { font-weight: bold !important; width: 22.083333%; }
footer .widget_twitter_vjck ul { font-size: .75em; line-height: 1.55em; margin: 0; padding: 0; }
footer #text-17 { margin-right: 0; width: 13.541667%; }
footer p { font-size: .75em; }
footer a { color: #a5cecd; }
#bsap_1255814 .bsa_it_ad { background: none; border: none; padding: 0; }
#bsap_1255814 .bsa_it_ad * { color: #fff; font-size: .4em; font-weight: normal; line-height: 1.3em; text-align: center; }
#bsap_1255814 .bsa_it_ad .bsa_it_t { color: #fbfed6; font-size: 1.5em; font-weight: bold; }
#bsap_1255814 .bsa_it_p{ display: none; }
/*****HOME CONTENT STYLES*******/
#sliderBkg { background: url('images/sliderBkg.png') no-repeat; background-size: 100%; clear: both; height: 100%; margin: 0 auto; height: 328px; max-width: 1099px; width: 100%; }
#slider { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; height: 60.670732%; margin: 6% 0 0 6.1%; max-height: 199px; max-width: 960px; padding: 1%; width: 87.591241%; }
#slider a { float: left; height: 100%; max-height: 199px; overflow: hidden; width: 100%; }
#slider img { max-width: 100%; width: 100%; }
.no-backgroundsize #sliderBkg, .no-textshadow #sliderBkg { height: 328px; width: 1096px; }
.no-backgroundsize #sliderBkg { background: url('images/sliderBkgIE.png') no-repeat; }
.no-backgroundsize #slider { padding: 0; }
.home h1 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; font-size: 1.549375em; font-weight: normal; line-height: 1.625em; padding: 22px 0; text-align: center; text-transform: none; width: 100%; }
.home h1 span:nth-of-type(1) { color: #68a1a0; }
.home h1 span:nth-of-type(2), .home h1 span:nth-of-type(5) { color: #e5763d; }
.home h1 span:nth-of-type(3), .home h1 span:nth-of-type(6) { color: #ee8e68; }
.home h1 span:nth-of-type(4) { color: #a5cecd; }
.no-multiplebgs .home h1 { background: url('images/divider.png') no-repeat center bottom; margin-bottom: 20px; }
.column { float: left; padding-right: 7.908164%; width: 28.061224%; }
.column.end { padding: 0; }
.column ul { color: #a5cecd; font-size: .8125em; line-height: 1.7em; list-style: none; margin: 0; padding: 0; }
.column p { padding: 0; }
.column p + a { background: url('images/arrowLink.png') no-repeat right; clear: both; float: left; font-size: .8125em; padding-right: 20px; }
/*****SUB CONTENT STYLES*******/
/*Portfolio Landing*/
#heading { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; float: left; margin-bottom: 20px; padding: 22px 0 10px; width: 100%; }
.no-multiplebgs #heading { background: url('images/divider.png') no-repeat center bottom; }
#heading h1 { margin: 0 0 15px; }
.tax-work .portfolio { float: left; margin-bottom: 20px; width: 100%; }
.tax-work .portfolio h2 { background: rgba(165,206,205,.6); border-radius: 81px; color: #fbfed6; float: left; height: 93px; margin: 0; padding-top: 70px; text-align: center; width: 163px; }
.tax-work .portfolio:nth-of-type(3) h2 { background: rgba(229,118,61,.6); }
.tax-work .portfolio:nth-of-type(4) h2 { background: rgba(238,142,104,.6); }
.tax-work .portfolio h2 span.desc { color: #222; font-size: .7125em; font-weight: normal; line-height: 1.55em; position: relative; top: -10px; text-transform: none; }
.tax-work .portfolio h2 span.desc, .tax-work .portfolio:hover h2 span.title { display: none; }
.tax-work .portfolio:hover h2 span.desc { display: block; }
.no-rgba .portfolio h2 { background: rgb(165,206,205); }
.tax-work .items { float: right; width: 80%; }
.tax-work .items a:nth-of-type(3n+3) { margin-right: 0; }
.tax-work .items img, .single-portfolio #details .highslide img, .single-portfolio .wp-post-image, aside > ul > li { background: rgba(229,118,61,.2); border: 1px solid rgba(183,91,43,.2); float: left; margin: 0 6px 6px 0; padding: 6px; }
.tax-work .items img:hover { opacity: .5; }
.no-rgba .items img, .no-rgba .single-portfolio #details .highslide img, .no-rgba .single-portfolio .wp-post-image, .no-rgba aside > ul > li { background: rgb(229,118,61); border: 1px solid rgb(183,91,43); }
/*Portfolio Detail*/
.single-portfolio #heading h1 { float: left; }
.single-portfolio #heading p { float: right; font-weight: bold; }
.single-portfolio .wp-post-image { float: left; padding: 1.5%; max-width: 60.416667%; }
.single-portfolio #details { float: right; width: 34.490605%; }
.single-portfolio #details h2 { background: url('images/divider.png') no-repeat center top, url('images/divider.png') no-repeat center bottom; clear: both; margin-top: 0; padding: 20px 0 15px; }
.single-portfolio #details ul, aside > ul { margin: 0 0 20px; padding: 0; }
.single-portfolio #details li { background: url('images/li1.jpg') no-repeat left center; font-size: .75em; list-style: none; margin-bottom: 3px; padding-left: 15px; }
.single-portfolio #details li:nth-of-type(3n+2) { background: url('images/li2.jpg') no-repeat left center; }
.single-portfolio #details li:nth-of-type(3n+3) { background: url('images/li3.jpg') no-repeat left center; }
.single-portfolio #details .highslide img { height: auto !important; margin: 0 3% 15px 0; padding: 1.8%; width: auto !important; max-width: 26.470588%; }
/*Testimonials*/
.tax-clients article { background: rgba(238,142,104,.5); border: 1px solid rgba(103,51,24,.5); float: left; margin-bottom: 10px; padding: 1.25%; width: 97.5%; }
.tax-clients article p:nth-of-type(2) { font-weight: bold; padding: 0; }
.no-rgba .tax-clients article { background: rgb(238,142,104); border: 1px solid rgba(103,51,24); }
/*Blog*/
.category #heading h1 { margin-bottom: 10px; }
#blog { float: left; width: 77.604167%; }
#blog section { background: url('images/divider.png') no-repeat center bottom; float: left; padding-bottom: 25px; width: 100%; }
#blog h2 a { background: url('images/blogTitle.jpg') no-repeat left center; display: block; color: #222; margin-top: 3px; padding: 3px 0 0 65px; text-transform: none; }
#blog h2 a:hover { color: #68a1a0; }
#blog .btn { background: #ee8e68; border: 1px solid #e5763d; color: #fff; float: left; font-size: .8125em; padding: 6px 30px; }
#blog .btn:hover { background: #a5cecd; border-color: #68a1a0; }
aside { float: right; width: 21.041667%; }
aside h2 { font-size: 1em; }
aside > ul > li { list-style: none; margin-bottom: 15px; padding: 7.4257426%; width: 85.074627% }
aside ul ul { margin: 0; padding: 0; }
aside input[type=text] { border: 1px solid rgba(183,91,43,.2); font-size: .8125em; font-style: italic; padding: 2%; width: 96%; }
.wp-pagenavi { float: left; font-size: .8125em; margin-top: 20px; width: 100%; }
.wp-pagenavi .pages { float: left; font-weight: bold; padding: 5px 15px 0 0; }
.wp-pagenavi a, .wp-pagenavi .current { background: #ee8e68; border-radius: 12px; color: #fff; float: left; font-weight: normal; height: 20px; margin-right: 5px; padding-top: 3px; text-align: center; width: 23px; }
.wp-pagenavi a:hover { color: #222; }
.wp-pagenavi .current { color: #222; font-weight: bold; }
.wp-pagenavi a:nth-of-type(3n+2) { background: #e5763d; }
.wp-pagenavi a:nth-of-type(3n+3) { background: #a5cecd; }
/*****MEDIA QUERIES FOR MOBILE STYLES *******/
@media only screen and (max-width: 1024px) {
#slider { height: 52.999999%; }
}
@media only screen and (max-width: 960px) {
header .container > a { display: block; float: none; text-align: center; }
header ul { clear: both; float: left; text-align: center; width: 100%; }
header ul li { display: inline-block; float: none; }
header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { top: 9px; }
#slider { height: 34.70732%; }
.tax-work .portfolio h2 { float: none; margin: 0 auto 20px; }
.tax-work .portfolio .items { text-align: center; width: 100%; }
.tax-work .portfolio .items img { float: none; }
}
@media only screen and (max-width: 480px) {
#slider { height: 41.5%; }
.column, footer li { float: none; padding: 0 0 15px; width: 100% !important; }
.single-portfolio #heading * { clear: both; text-align: center; width: 100%; }
.single-portfolio .wp-post-image { max-width: 97%; width: 97%; }
.single-portfolio #details { margin-top: 30px; width: 100%; }
#blog { width: 100%; }
aside { display: none; }
}
@media only screen and (max-width: 400px) {
header { margin-bottom: 0; }
header li { padding-bottom: 10px; }
header li.menu-item-4780, header li.menu-item-4782, header li.menu-item-4781, header li.menu-item-4783 { display: none; }
}
/******PRINT STYLES*********/
@media print{
*{background:transparent!important;color:#000!important;text-shadow:none!important;filter:none!important;-ms-filter:none!important}a{text-decoration:underline}a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}.ir a:after{content:""}a[href^="javascript:"]:after{content:""}a[href^="#"]:after{content:""}pre{border:1px solid #999;page-break-inside:avoid}blockquote{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}tr{page-break-inside:avoid}img{page-break-inside:avoid;max-width:100%!important}@page{margin:.5cm}p{orphans:3;widows:3}h2{orphans:3;widows:3;page-break-after:avoid}h3{orphans:3;widows:3;page-break-after:avoid}
}
Responsive design is no easy task! This site has taken me a whole lot longer to code than anything else I’ve ever worked on!
Next week
Cross your fingers, we’ll be finishing up the site, and I’ll offer an eBook of everything!
Amber Weinberg
Amber is a freelance front-end developer specializing in semantic and accessible custom WordPress themes. She works with agencies and other freelancers to bring their designs to life using custom ACF flexible layout builds - making them more performant and less buggy while allowing the client easy customization without breaking the design system.