Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialJonny Strange
6,412 PointsWhat's the best way to switch between header covers without using Javascript?
I'm want to switch between header covers depending on the device it's shown on but without using JS.. I've looked into data-interchange but it doesn't work in Firefox or in Dreamweaver either and not why. Any ideas into why and any other ways doing this without using JS??
3 Answers
Christopher Leonard
11,172 PointsAre the header images the same thing and you just want them to scale down to different size screens or are they different images for the different devices?
That will determine what the best way to go about this is.
Honestly, it might be wise to take the Responsive Layouts course in the CSS library. It'll help explain media queries better than I can typing it by hand.
Christopher Leonard
11,172 PointsYou wouldn't typically use Javascript for something like this. You can use media queries in your CSS to hide one image and show a different one.
Jonny Strange
6,412 PointsHow do I do this??
Christopher Leonard
11,172 PointsWell it would be something like:
@media screen and (max-width: 480px) {
#image1 {
display: none;
}
#image2 {
display: block;
}
}
Where image1 is the image you display on a desktop and image2 is the image you want to display on a mobile device with a screen less than 480px wide.
Jonny Strange
6,412 PointsThanks
Jonny Strange
6,412 PointsChristopher, here's my css and html because switching header covers isn't working in the media queries, I can't work out why.
CSS: /*
Name: layout.css Date: 19/03/15 Version: 1.0 Author: Jonny Strange
Table of Contents
General Styles body section
Layout Styles #main-header #main-cover #headline #duties
/***************************************************************** BODY STYLES ******************************************************************/ body { font-family: Helvetica, sans-serif; }
a { text-decoration: none; }
section { position: relative; }
img { max-width: 100%; }
.center-text {text-align: center;}
/***************************************************************** HEADER STYLES ******************************************************************/
main-header
{
}
header-cover-mobile
{ height: 12rem; background-image: url('../assets/bg-cover-small.jpg'); }
header-cover-tablet
{ height: 25rem; background-image: url('../assets/bg-cover-medium.jpg'); }
header-cover-desktop
{
background: url('../assets/bg-cover-large.jpg');
}
header-cover-xdesktop
{
background: url('../assets/bg-cover-xlarge.jpg');
}
header-cover-retina
{
background: url('../assets/bg-cover.jpg');
}
header-cover-mobile,
header-cover-tablet,
header-cover-desktop,
header-cover-xdesktop,
header-cover-retina
{ background-color: #0f0d0d; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center; }
header-title
{ position: relative; display: inline-block; font-family: 'Kaushan Script', cursive; color: #1f268e; font-size: 1em; font-style: normal; text-align: center; margin: 3.3em 0 0 2.3em; border: 3px solid #1f268e; }
header-title h1
{ margin: 0 0.2em 0.4em; padding: 0; }
header-title p
{ position: absolute; padding: 0; top: 2.1rem; left: 0; right: 0; font-family: Helvetica, sans-serif; }
header-title p span
{
padding: 0;
background: rgba(15, 13, 13, .7);
}
logo
{ display: inline-block; }
navigation
{
}
nav ul {
}
nav ul li { }
nav ul li a { }
@media screen and (min-width: 480px) { .header-cover-mobile { display: none; }
#header-cover-tablet
{
display: block;
}
}
/***************************************************************** HEADLINE & DUTIES STYLES ******************************************************************/ .headline { position: relative; display: inline-block; border: 1px solid; padding: 0.8em; text-align: center; }
.headline h1 { margin: 0; padding: 0; }
.headline p { position: absolute; top: -25px; left: 0; right: 0; }
.headline p span { padding: 0 1em; background: #fff; }
/* Pacifico|Courgette
font-family: 'Pacifico', cursive; font-family: 'Courgette', cursive; style="background-image: url(assets/img/bg-cover.JPG)" text color #1f268e; background color: #0f0d0d */
HTML: <!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta charset="utf-8"> <meta name="author" content="Jonny Strange" /> <title>Jonny Strange | A up and coming web designer</title> <meta name="description" content="Hi, Jonny Strange and I'm a up and coming web designer" />
<!-- Favicons --> <link rel="icon" type="image/x-icon" href="../favicon.ico">
<!-- Google Fonts --> <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<!-- FontAwesome --> <link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Stylesheets --> <link rel="stylesheet" type="text/css" href="css/normalize.css"> <link rel="stylesheet" type="text/css" href="css/grid.css"> <link rel="stylesheet" type="text/css" href="css/layout.css"> </head>
<body>
<header id="main-header" role="banner"><!-- Start: #header -->
<div id="header-cover-mobile"><!-- Start: #header-cover -->
<div id="header-title"><!-- Start: #header-title -->
<h1>Jonny Strange</h1>
<p><span>Interm Web Designer</span></p>
</div><!-- End: #header-title -->
</div><!-- End: #header-cover -->
<nav id="navigation" role="navigation">
<div class="row">
<div class="column3">
<a id="logo" href="index.html">
Jonny Strange
</a>
</div>
<div class="column9">
<ul class="main-nav" id="nav-menu">
<li><a href="#personal-profile">Personal Profile</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#work-experience">Work Experience</a></li>
<li><a href="#education">Education</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</header>
<section id="personal-profile">
<div class="row">
<div class="column12">
<div class="headline center-text">
<p>
<span>Who am I?</span>
</p>
<h1>Personal Profile</h1>
</div>
</div>
</div>
</section>
<section id="skills">
<div class="headline">
<h1>Skills</h1>
</div>
</section>
<section id="work-experience">
<div class="headline">
<h1>Work Experience</h1>
</div>
</section>
<section id="education">
<div class="headline">
<h1>Education</h1>
</div>
</section>
<section id="portfolio">
<div class="headline">
<h1>Portfolio</h1>
</div>
</section>
<section id="contact" role="contentinfo">
<div class="headline">
<h1>Contact</h1>
</div>
</section>
<footer id="main-footer">
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var viewportHeight = window.innerHeight;
var viewportWidth = window.innerWidth;
var screenHeight = window.outerHeight;
var screenWidth = window.outerWidth;
var resultViewport;
var resultScreen;
resultViewport = '<p><h1>Viewport size: ' + viewportWidth + 'x' + viewportHeight + '</h1></p><br>';
console.log(resultViewport);
</script>
</body> </html>