Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#877720

Hi
the image size is 100% width by default and change the size according to the container size . If you will apply max-width it may effect in large screens as image does not use 100% width due to a fix max-width .
Add below code in custom.css file to apply a max-width

.acm-slideshow .owl-carousel .item .slider-img {
    max-width: 1800px;
}

Change 1800px value with your value .

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#877867

Thanks Pankaj. That’s almost there, however the image is oriented to the left. I tried some alignment tags in firebug such as:

align-items: center;

but couldn’t get the image to centre properly. Any tips?

There is also a grey region that appears to the right of the image, but I should be able to find a way to fix that.

Best,

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#877883

Hi

you will apply max-width it may effect in large screens

it was due the image size defined .U need to increase the value of max-width of remove it so it cant .otherwise it effect on large display .

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#877885

I’m sorry, I don’t understand.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#877886

Hi
the space comes due the you applied a fix width and image not able to change the size with respect to container size . you should use it as 100%width .
I hope its clear now .

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#877888

Sorry I still don’t think I understand. Unless you are saying that it is not possible to set a maximum size without producing a space to the side. Is that the case?
If it is possible to limit the maximum size and have the image centred on the page, may I send you a login via PM so you can edit?
Thanks,

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#877971

Hi
You need to custom work in css using media queries to align images in different screen-size .
Below code will be used for max-height of image and to make it in center via margin-left
apply the media queries with help of this doc

.acm-slideshow .owl-carousel .item .slider-img {
    max-width: 1200px;
    margin-left: 64px;
}

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#878271

I see. Thanks, but what a shame the image can’t be centred. I’ll have a look at this, but it seems to me that the image may appear skewed off-centre depending on the window size, given that the image that I am using is symmetrical. Is there an alternative to the JoomlArt Advanced Custom Module, that will allow me to resize and centre images?
Best,

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#878300

Hi
It can not be its logical rule . You can use my previous suggestion to make the custom work .

[surdo Friend surdoJoin date: March 2015Posts: 108Downloads:14Uploads:10 Thanks: 33]

#878992

Thanks Pankaj. I’ve made a start on it and will fine tune it when I get more time.
All the best,

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#879120

You are welcome . Do not hesitate to open a new thread for any issue in Future .

[Author]

Posts