Sorry for the late response.
First, add this to your css:
.ngg-gallery {
width: 100% !important;
max-width: 350px; /*here you want to enter the maximum width of your slideshow */
}
.ngg-gallery img {
max-width: 100% !important;
height: auto !important;
}
Then, add this Javascript:
<script type="text/javascript">
jQuery( window ).resize(function() {
var cw = jQuery('.ngg-slideshow').width();
jQuery('.ngg-slideshow').css({'height':cw+'px'});
});
</script>
This should work. More information can be found here: http://wordpress.org/support/topic/plugin-nextgen-gallery-how-to-make-gallery-responsive-to-browser-size?replies=30
Oops, this should of course be:
.ngg-slideshow {
width: 100% !important;
max-width: 350px; /*here you want to enter the maximum width of your slideshow */
}
.ngg-slideshow img {
max-width: 100% !important;
height: auto !important;
}
My mistake!
Sadly, none of the suggestions above work for me. Im not having the issues (others here have described) regarding responsiveness in mobile view. However, I am having the issues when it comes to centering the images that appear in the slideshow, due to some images being landscape and others being portrait.
Firebug did allow me to test if I could add margin-left: auto and margin-right auto to the inline css its pulling out. However, I have no clue how/where I would add that in. The jquery that niknetniko gave didnt seem to have any effect.
Here is what I get inline on the slideshow, and where I can add the margin auto declarations in Firebug to get the centering I am seeking.
‘element {
height: 155px;
position: absolute;
z-index: 6;
top: 0px;
left: 0px;
display: none;
width: 116px;
opacity: 0;’
@smilefoto:
You may test how your design works on any device with a free service at http://www.responsinator.com; just write your site URL into Responsinator and you will see the results for a number of devices. At least http://www.smilefoto.se does not seem to work fully ok on small screens – so the design itself is not responsive 🙁
There is one simple addition to you theme’s style.css file which you will find in theme’s root folder
/*******************************
limit image width to max. 100%
******************************/
img {
max-width: 100%;
}
This will make sure none of your images will not flow over on small screens.
