How to make this responsive?

HTML & CSS
1

Hello all,
Don’t ask why, I just fall in love with this image gallery, probably because it was the easiest to implement, I tried to search google for responsive galleries but couldn’t find anything that I really like.

So I decided to try this: I added the image gallery and I want to try and make it responsive, any ideas what changes should I make?
http://petpal.co.il/pet-3124

Thanks.

2

The images do not seem to be loading in my browsers (FF & Chrome).

3

I moved the site to the real domain, you can view it here:
http://petpal.co.il/pet-3124

4

My work uses this. I like it.

5

Yeah, I’d say go with one that already has responsiveness built in. (It can be a real poo to adapt a fixed width slider to be responsive.) bxSlider is a good option too:

6

Thank you both,
I decided to go for Ryan’s suggestion, but the examples listed on his page are really not helping me…

So I added it here:
http://petpal.co.il/pet-3124

2 questions:

  1. As you can see, no matter on which image you click on the image navigation, its always the same image that shows, only the arrows work for changing images, what did I do wrong?
  2. I still couldn’t get it to be responsive, when i zoom in the size of the gallery doesnt change, ideas?
7

What does zooming have to do with responsiveness?

Responsive web design is about the layout adapting the to the size of the viewing device but in your example above you just have a fixed width site which is not responsive at all. Zoom has nothing to do with responsiveness although usually a responsive site will zoom better because its not a fixed width.

8

hey Paul, the site is not fixed width, maybe you see a cached version of my old site for some reason?

and I say zoom because i’m testing on desktop first, because if i zoom in and I get horizontal scrollbar at some point then something is wrong, all site so far is responsive besides of these pages I posted, and its because the slider isn’t responsive for some reason although it should.

I would really appreciate any help on this one :stuck_out_tongue:

9

Ah sorry must have looked at the wrong thing :smile:

Have you added the responsive initialisation mentioned in the docs.

$('.responsive').slick({
  dots: true,
  infinite: false,
  speed: 300,
  slidesToShow: 4,
  slidesToScroll: 4,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
  ]
});
10

I tried but it has no point anyway.
I already got by default:
slidesToShow: 1,
slidesToScroll: 1

these settings are only to make space for images to be larger on smaller screens, it doesn’t actually change plugin size which should be done automatically as far as i can understand it.

He’s examples are really aweful, using h3 tags instead of actuall images for the examples :angry:
I belive ryan can be the best answer as he said he is using this plugin but he doesn’t seem to be around the last day @RyanReese

11

The Javscript isn’t working for you.

Could you simply just take their code and work your images in that way? Not sure why the JS isn’t working. You have everything matching…

12

What you mean javascript doesn’t work for me? its simply because I use images and not dummy h3 tags like in the examples, otherwise it would work.

Its an excact copy of his examples, maybe you could try something? you can take all the data directly from my site source if you need the images…

Edit: ok now I really wonder what’s wrong :smile:
Broken: http://petpal.co.il/test
Works: http://petpal.co.il/test.html

@RyanReese @PaulOB

13

Hi,

That script doesn’t seem to work inside table-cells. If you remove the display:table, display:table-row and display:table-cell from the rules in that page then the slider starts working again.

That page is pretty tall anyway so you don;t really need a sticky footer approach so I would add a class to the body on that page and use it to modify the rules I mentioned to display:block instead (and heights on rows to auto) .

Either that or find a new script again :smile:

14

Paul seems to have given you the answer. When I compare the CSS classes and CSS code, it all matches. However upon resize, Javascript was working for demos but NOT for your example. This made me conclude the Javascript is faulty. I’m not sure why table cells are cuasing it to break but that’s another question for another day.

15

Well wanted to try out ralphm slider suggestion and what do I find out, that it doesn’t work when using table-cell either! sigh
http://petpal.co.il/pet-3124

Guess i’ll just pass on and make that page display block like paul suggested, although I don’t like such workarounds :cry:

Edit* actually, it just doesn’t work when zooming in, when viewing on my mobile or refreshing the page on desktop when screen is already zoomed in, the plugin is responsive, so ill just leave it like that ^^.

I do have a really tiny horizontal scrollbar appearing for some reason when for example im loading the page when the browser is fully zoomed or on mobile, I don’t see any margins on the plugin thought, any ideas?