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

CSS

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Posted by Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Modifying the CSS for the Slick Gallery

Hi all,

I've got a project on my hands that I've been working on for a while but no matter how much i try i can't seem to progress. What I need to do is display 2 different versions of an interactive gallery depending on the width of the screen.

One is a Flash gallery, One is a Gallery in slick.

I've created some media queries to try and achieve this but slick won't disappear below the first media query block (minimum 960 pixels) and I can't seem to find the CSS selector I need to control this.

It's a little complicated but the page I'm working on is here! http://www.jonniegrieve.co.uk/autoc/gallery2.html

1 Answer

Byron Stine
Byron Stine
4,877 Points
Byron Stine
Byron Stine
4,877 Points

In the media query in the formatting.css file to change the display of that gallery, your code for hiding the gallery is as follows:

``` .gallery { position: relative; margin: 0 auto; display: none; }

and in your *slick.css* file you have a rule:

```.slick-initialized .slick-slide
{
    display: block;
}

However, in your HTML file you have the div tied to three classes as follows: <div class=“gallery slick-initialized slick-slider”>

This is causing a cascading issue where the .gallery rule is being ignored because later in the code you have a .slick-initialized rule that tells it to display: block. The .slick-initialized rule will ignore your media query because it is outside and after of your media query rule. In the <head> section of your HTML file, it is also linked in a .css file after your format.css file that contains the media query.

There are two ways to fix this:

  1. Change the order of the classes assigned to the div to <div class=“slick-initialized gallery slick-slider">, 0r

  2. To fix this delete the following rule from your slick.css file:

```.slick-initialized .slick-slide { display: block; }

I'm not sure what affect this will have on other elements within in the div because of the complexity of your code. So inspect other elements in your div to make sure they aren't effected. They shouldn't because it's just the display: block rule that's changing.

You're site is coming along great. Good Luck!
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

Thanks, I've already started to implement the changes and the HTML gallery is gone from the desktop width. But it is a complex process as you say. The slick system introduces so many new classes to the elements it's hard to keep up :)

Now I'm trying to get the slick buttons and gallery to behave the way I want :)

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

In the end I've ditched slick and started on a simpler solution. I'm not sure what was so wrong with Slick as it's in my eyes the best custom web gallery solution out there but my code as you mentioned is so complex. :)