How to make gallery thumbnails responsive?

  • Resolved Mason Verger

    (@deplancy)


    12 years, 1 month ago

    Hi there, excellent plug-in, certainly the best for this purpose.

    Have managed to set-up most, very specific options relatively easily but I wonder
    if you could kindly assist with the following.

    How could I make the gallery thumbnails responsive?
    = I’m finding that as I’ve set the thumbnail size quite large (these may even be
    the width of the content area…) the thumbnail image does not re-size dynamically
    and the image becomes distorted horizontally/ does not maintain it’s aspect ratio.

    Is there some kind of proportial/ percentage fix for this I could add to the: jquery.fancybox.css ?

    I’m using the fancybox2 option in your extended plugin.

    I’m working via localhost/ MAMP on this currently but this is the theme I’m using: http://themetrust.com/demos/port/
    & placing the gallery into this page layout: http://themetrust.com/demos/port/full-width/

    Also in ref to this, is the any way to remove the spacing (padding?) to the left and right hand sides of the thumbnail image(s) so the fit to the edge of the main content container
    div?

    Hope you can help, best wishes: AE

    https://wordpress.org/plugins/easy-image-gallery/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Munro / AffiliateWP

    (@sumobi)

    12 years, 1 month ago

    Hi there,

    Happy to help you with CSS but I’d really need to see it live. Are you able to upload your theme somewhere for me to take a look at it?

    Is it responsive in the fact that the gallery collapses as you resize the browser window, but if you have very large thumbnails you’ll need to make sure your images are set to be responsive.

    This is usually done in your theme, for example

    img {
	max-width: 100%;
	height: auto;
}
    Thread Starter Mason Verger

    (@deplancy)

    12 years, 1 month ago

    Thanks greatly for the fast & helpful response here.

    “Is it responsive in the fact that the gallery collapses as you resize the browser window”
    = ok, I checked this by changing the ‘Thumbnail size’ in Settings > Media back to 300 x 300 then regenerating thumbnails & yes, they do ‘stack’ fine when the widow is resized.

    “but if you have very large thumbnails you’ll need to make sure your images are set to be responsive.” = hence, yes – it’s just that – i.e if each thumb is to large to be optimal for
    a smaller screen/ mobile device etc the aspect ratio gets distorted.

    I will have a fiddle using the code you give & read up re. responsive layout otherwise thanks.

    I’ll see if I can find some way of uploading it and get back to you when I’ve put it online if still have problems with this.

    thank you & best wishes: AE

    Thread Starter Mason Verger

    (@deplancy)

    12 years, 1 month ago

    Just to follow up – I added the code you gave below to my theme’s ‘style.css’ and yes,
    this fixed the issue straight away.

    Thanks a lot! Wish you a good weekend.

    img {
    max-width: 100%;
    height: auto;
    }

    Andrew Munro / AffiliateWP

    (@sumobi)

    12 years, 1 month ago

    No problem, glad that helped

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘How to make gallery thumbnails responsive?’ is closed to new replies.