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!

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

General Discussion

Tamsin Waters
Tamsin Waters
6,116 Points
Posted by Tamsin Waters
Tamsin Waters
6,116 Points

Making jQuery gallery overlay responsive - And background image not covering entire page...

Hi all,

I am working on a personal project and I have applied the 'make a simple light-box gallery' to the photos in my project which is responsive to mobile devices using media queries - However I can't figure out how to make the gallery overlay responsive to smaller screen ... any ideas

HTML page:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Sherril.co.uk | Moorland Webcam</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Sniglet|McLaren|Alike' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=McLaren' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>


<body>

<header>
    <a href="index.html" id="logo">
        <h1>Sherril.co.uk</h1>
        <h2>Moorland Webcam</h2>
    </a>



    <nav>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="gallery.html" class="selected">Gallery</a></li>
            <li><a href="contact.html">Contact</a></li>
            <li><a href="snapshots.html">Snapshots</a></li>
            <li><a href="timelapse.html">Timelapse</a></li>
        </ul>
    </nav>
</header>


<div id="wrapper">
    <section>

        <h1>Autumn Image Gallery</h1>
        <ul id="gallery">
            <li><a href="img/Autumn/P6010040.JPG"><img src="img/Autumn/P6010040.JPG" alt="Autumn 1"></a></li>
            <li><a href="img/Autumn/P9280064.JPG"><img src="img/Autumn/P9280064.JPG" alt="Space Juice by Mat Helme"></a></li>
            <li><a href="img/Autumn/P9280070.JPG"><img src="img/Autumn/P9280070.JPG" alt="Education by Chris Michel"></a></li>
        </ul>

    </section>

    <section>

    </section>
    <footer>
        <a href="https://www.facebook.com/sherrildartmoor" target="_blank"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="mailto:webmaster@sherril.co.uk"><img src="img/mail.png" alt="Email Logo" class="email-icon"></a>
        <p>&copy; 2014 Sherril.co.uk.</p>
    </footer>

</div>

<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</body>
</html> ```

Main CSS 

``` HTML
#overlay {
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    text-align: center;
}

#overlay img {
    margin-top: 10%;
    max-width: 768px;

}

#overlay p {
    color: white;
}

Responsive CSS Page

@media screen and (min-width: 480px) {


    #primary {
        width: 50%;
        float: left;
    }

    #secondary {
        width: 40%;
        float: right;
    }

    #overlay img {
        margin-top: 10%;
        max-width: 480px;

    }

    #gallery a {

    }

any of the styles applied here seem to be applying when it is in full screen ...

app.js page:

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p></p>");


$overlay.append($image);


$overlay.append($caption);


$("body").append($overlay);


$("#gallery a").click(function(event){
    event.preventDefault();
    var imageLocation = $(this).attr("href");
    //Update overlay with the image linked in the link
    $image.attr("src", imageLocation);


    $overlay.show();


    var captionText = $(this).children("img").attr("alt");
    $caption.text(captionText);
});


$overlay.click(function(){
    //Hide the overlay
    $overlay.hide();
});
Tamsin Waters
Tamsin Waters
6,116 Points
Tamsin Waters
Tamsin Waters
6,116 Points

Also I have the background set as a background image (i.e. a photo of clouds) however on some pages the image does not cover the entirety of the page which does have a lot of content on - therefore leaving a blank space at the bottom of page.. until stretched with content - is there an element I can put in the stretch the photo to the bottom of the page? or a way to make the photo cover the page without having to use something to stretch it? 

body { background-image: url("../img/sky.jpg");
    background-color: #E1EDC2;
     background-repeat: no-repeat;
     background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    }

body {
   color: #011526;
}

I thought 'cover' would cover it.... but apparently not :/

Michael Austin
Michael Austin
Courses Plus Student 7,814 Points
Michael Austin
Michael Austin
Courses Plus Student 7,814 Points

Do you have a working url?

With background size you need assign height:100% to the html tag and the body tag in the css.

4 Answers

Sunil Verma
PLUS
Sunil Verma
Courses Plus Student 211 Points
Sunil Verma
Sunil Verma
Courses Plus Student 211 Points

which programming language is best for making online audio player

Tamsin Waters
Tamsin Waters
6,116 Points
Tamsin Waters
Tamsin Waters
6,116 Points

Thanks Michael, the url must be working because the background image is there but just not covering the whole page - I just tried what you said.... 

html {
    height: 100%;
}

body {
    font-family: 'McLaren', sans-serif;
    height: 100%;
}

and then the url looks like this..

HTML

body { background-image: url("../img/sky.jpg");
    background-color: #E1EDC2;
     background-repeat: no-repeat;
     background-size: cover;
    height: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    }

body {
   color: #011526;
}

unfortunately it's still not covering the entire page - but it is covering more than it was...

Michael Austin
PLUS
Michael Austin
Courses Plus Student 7,814 Points
Michael Austin
Michael Austin
Courses Plus Student 7,814 Points

Hi Tamsin,

Sorry I meant have you got a url that I could see? Makes it easier to debug.

Possibly add min-height:100% and min-height:100% to the body and the html (as well as the height: 100%)

Thanks

Tamsin Waters
Tamsin Waters
6,116 Points
Tamsin Waters
Tamsin Waters
6,116 Points

my bad sorry thought you meant image url :P errr i'll give it a go - i just signed up to code pen for the purposes of this - not too sure how to use it, or if there is a way to import photos, obviously the background image will not show because i haven't got image on PenCode -but maybe you will be able to see better looking at the full code http://codepen.io/Tamsin/pen/swlhc