You can try change gallery settings width or picture resize method to fill all area with image.

I tried that way, but it stills has the issue. I guess if I am doing something wrong, so can you please send me the screenshot where I need ti change these settings?

Try to use galleria.io template or change resize mode to crop for Fulll View Image and stratch if smaller yes.

I tried that. But the problem is not with the image and it size, but the outer box which is not changing. is there any config to change the width of the outer box. The outer box remains stretched and occupy fully on the space. How can I reduce it?

Those gallery templates are

http://galleria.io/

http://bxslider.com/

You can see their parameters and change field output template accordingly.

Hi,

I have exactly same issue here. I tried all possible ways as mentioned here, but no luck. Can sergey help on this?

Show screenshot or give a link to see.

Sergey Show screenshot or give a link to see.

screenshots attached

Unfortunately yes, this slider acts like this. Try to edit CSS and change container width from 100% to something it adapts to bicture width.

CSS workarounds and suggestions

If your page content area is wider than the largest slider image:

• Stretch image to 100%, too. Image fills whole slider. Image might be cropped in height!

.bx-wrapper img {
width: 100%;
}

• Or the other direction... keep images in max size, and restrict the sliders max width. Either to a percentage:

div.bx-wrapper {
max-width: 75%; 
}

or the max pixel width of your largest image. Or the largest main content area!

div.bx-wrapper {
max-width: 720px; 
}

thanks, which file is this need to be changed in?

Here: components/com_cobalt/fields/gallery/bxslider/jquery.bxslider.css

brianpat thanks, which file is this need to be changed in?> Konstantin

Konstantin Here: components/com_cobalt/fields/gallery/bxslider/jquery.bxslider.css

Check the loading order of all CSS files in your site. I would suggest not to alter and change the original bxslider CSS file. Always try to override the rules in your site template CSS, or in a CUSTOM.CSS file. Just make sure it loads after bxslider.CSS file.

So, you are save on Cobalt/Field updates.

If you need different Sliders and image behavior in multiple site locations, you should combine those CSS classes with extra classes like:

• Gallery field CSS "custom class" in field parameters
• or Joomla! PageClassSuffix for the respective MenuItem