Resize Slideshow location

propolis

Hi,

How can I reduce the size of where the image is being shown - mask-slideshow location

I reduced the mask-slideshow image as well as the main slideshow image, but nothing resized on the site

Can it be made the same width as the page content size

Any suggestions much appreciated

Eddie

Ninja

propolis
Hi
Image load in the background
you have this code in custom.css file


@media only screen and (max-width:980px) {
.acm-slideshow .item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
}

change the background size to 100% and check.

propolis

Hi,

Thanks for getting back to me. Changed the code and it mad no difference, cleared cache as well.

If you look at attached image, will explain better what I need.

A: This space needs to be the same distance from side as the content in document
B: This space needs to be the same distance from side as the content in document
C: This width needs to be the same width as the content on the page
D: This height needs to be variable if possible or can be static

Hope this helps

Eddie

Ninja

propolis
Hi
Slideshow image use full width of the container.
And the module position is full width so its not like you shared : http://prntscr.com/qit8vm

Further image D line in image is part of image its not related with template.

propolis

Hi,

Sorry, I am now completely lost. Is the container the full page width from left to right where the image fits in?

When I add much smaller image it just fills the whole space from left to right. The images is way to big and when users load different menu options, they cant see that the page loaded because its the same image.

Eddie

propolis

Here is a sample of what I want it to look like. See attachment.

The image does not fill the whole screen, but just the width of the page

Eddie

Ninja

propolis
Hi
Its not the same site you shared. The position you are using is full width . please take a look on the demo page here to see how its works. the same is on your site.

propolis

Ninja

Hi,

This is a different site I showed of what I would like to achieve, I know its not the same site I shared originally. All I am asking for is not to use full width and all the options I had tried did not work.

Just let me know if its achievable or not because at the moment we are going around in circles

Eddie

Ninja

propolis
Hi
In this you can use Module suffix container
so it will restrict the width of the module position.

propolis

Ninja

Hi,

I have Module Suffix set as 'container'

I have this in my custom.css file:

@media only screen and (max-width:980px) {
.acm-slideshow .item {
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
}

I still dont see any changes happening in width reduction :-(

Eddie

Ninja

propolis
Hi
use this code in custom css file

.t3-slideshow.container  {max-width:1200px;}

play with different width value as per needs.

Regards

propolis

Ninja

Thank you for the update. Will try it later today.

Will the height of the container adjust proportionally?

Thanks

Eddie

propolis

Hi,

Added the code and the width changed fine. What is happening is that the height does not change, even if I load a picture half the height size that I used before, it still stays the same height.

Searched the forums and after 10 pages of info I gave up, because the code is not there, not the same template etc etc.

For JA Diner, how do I reduce the height?

Thank you

Eddie

saguaros

Hi Eddie,

I just jumped into this topic. Do you mean the height of the slideshow?

By default, it's set with a min-height: 840px value, to override this value, you can use this custom css:

.acm-slideshow .item {
    min-height: auto !important;
}

propolis

saguaros

Thank you.

That did the trick

Thanks for your help

Eddie