Using media queries

Hi Alexis, You probably need to add a bit more detail to this post if this is the wrong answer, example of your code so far e.t.c. but I think you are referring to the grid.

Its not just the images that appear aligned to the left, it should be all the divs, elements e.t.c. This is achieved by adding below to your media query.

In essence below tells the browser that at a max-width of 650px all elements given a grid class span 100% of the viewport size. As divs, imgs e.t.c. are block level elements they will all appear beneath each other, you could for instance change which appear first, second, third in the browser by cutting and pasting the img code and replace them with each other within the HTML class. Rewatch the adaptive design video and check the grid section.

@media screen and (max-width: 650px) {

    .grid_1,
    .grid_2,
    .grid_3,
    .grid_4,
    .grid_5,
    .grid_6,
    .grid_7,
    .grid_8,
    .grid_9,
    .grid_10,
    .grid_11,
    .grid_12    {
        width: 100%;
    }

No Javascript required for this, I think the js file you saw is used for the picturefill section. That is where certain large or retina screen comptible images are swapped out for smaller sized ones depending on the viewport size (device) to enable faster downloads over 3G e.t.c.for phones/tablets.

Hope that helps,

Rgds Neill

Hey Neill thnx for the answer. My code is exactly like the screenshot you are presenting.

@media screen and (max-width: 480px){ .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 { max-width: 480px; }

}

Is there anything else i should add on my code? Maybe something that is not presented in this video?

Hi Alexis, Well you should be using a % size for the grid width at the bottom of that code, ..grid_12 max-width: 100% not ..grid_12 max-width: 480px; The % is what gives the elements the ability to respond relative to the browser/veiwport size.

However, you should still be seeing the expected result when resizing your browser to 480px from what I can see there.

Try it with the 100% max width, if no joy then the error is elsewhere in your code. I would suggest re watching the video's and if its still not making sense upload some more css/html code snippets for us to check out.

When watching the videos make sure you understand the use of the grid and are naming your HTML elements correctly to correspond with the grid and css e.t.c.

Rgds Neill

Hello Neill, i tried this (%) but it seems that something else is wrong, so far everything looked to be working properly, in any case i will watch the video again to see if i am missing something!!