Joomla Templates Club 406,261 posts

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#838234

Hi,

Please advise how to make the JA ACM slideshow in Uber fully responsive so as the browser/window shrinks the slideshow automatically scales to fit.

This is how it currently displays, just cropping the images rather than responsively shrinking…

Full desktop size – http://prntscr.com/9ly38x Smaller desktop size – http://prntscr.com/9ly3h4

Please advise. Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#838702

Try opening the file: http://www.thedressempire.co.uk/templates/uber/local/acm/slideshow/css/style.css

Line 182:

.acm-slideshow .style-3 .item {
    background-repeat: no-repeat;
    background-size: cover;
    color: #ffffff;
    padding-top: 120px;
}

change the ‘background-size’ property to: background-size: 100% 100%

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#838893

Hi @saguaros,

Thank you for your reply, this has partially resolved our issue. However now when we resize the window down to a smaller window (aprox tablet size) the slideshow images become stretched, please see – http://prntscr.com/9map6g

Please advise how to resolve? Do we need a line of CSS for @media width??

Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#839605

With the current slideshow type that you’re using, the image is embedded as background-image, not a separate element so that it can be scaled properly: http://prntscr.com/9mmauz . With background-image like this, you can use ‘background-size’ property to style for it only.

With background-size: 100% 100% as above, the image will be resized as you can see now

In case of background-size: center center, the image looks good but it will focus to display the center part of image, if that image is big (like this case).

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#840279

Hi @saguaros,

Ok thank you for your feedback.

So would you suggest resizing the images to smaller dimensions and making the slideshow height (in the acm module) smaller?

Please advise.
Thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#840570

You can try with the ACM – Slideshow – Style 2, it will suit your need. The Slideshow – Style 3 (the current style you’re using) is used for another purpose as you can see in our demo site

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#840970

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#841428

You can open the file: ROOT/templates/uber/local/acm/slideshow/css/style.css

Look for this css rule:

.section-inner.tbtdeslideshow {
    padding-top: 0px;
    padding-bottom: 0px;
}

change it to:

@media (min-width: 992px) {
.section-inner.tbtdeslideshow {
    padding-top: 0px;
    padding-bottom: 0px;
}
}

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#841746

Hi @saguaros,

Thank you for your reply.

I found the css rule you mentioned and changed it to what you suggested, but unfortunately it didn’t have any affect. It still seems to be overwritten by the original template padding which we don’t want to overwrite globally.

Please advise how to resolve.
Many thanks

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#841770

You can update the FTP account in the Site Access Information in 1st post, I will check for you.

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#841786

HI @saguaros,

Ok, I have updated this. Please bear in mind this is a live website when making changes.

Thanks.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#841966

I still don’t see the FTP account, you can send the info via your reply and SET IT AS PRIVATE reply (so that only Moderators and Staff can see)

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#841970

This reply has been marked as private.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#842709

Did you get it solved? as I can see that there is no padding now.

[romolo Friend romoloJoin date: August 2012Posts: 585Downloads:97Uploads:37 Thanks: 79 Thanked: 23 times in 11 posts]

#843898

Hi @saguaros,

No we’re still having trouble removing the padding above and below the slideshow (Module: "Slideshow [Home] 2"). We’ve tried inserting css into custom and the slideshow css, both of which haven’t worked for us.

Please advise.
Thanks

[Author]

Posts