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 trial

Design

Jonny Strange
Jonny Strange
6,412 Points
Posted by Jonny Strange
Jonny Strange
6,412 Points

What'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
Christopher Leonard
11,172 Points
Christopher Leonard
Christopher Leonard
11,172 Points

Are 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
Christopher Leonard
11,172 Points
Christopher Leonard
Christopher Leonard
11,172 Points

You 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.

Christopher Leonard
Christopher Leonard
11,172 Points
Christopher Leonard
Christopher Leonard
11,172 Points

Well 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
Jonny Strange
6,412 Points
Jonny Strange
Jonny Strange
6,412 Points

Christopher, 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>