Joomla Templates Club 406,261 posts

[nathanciobanu Friend nathanciobanuJoin date: January 2014Posts: 36Downloads:13Uploads:3 Thanks: 9]

#205631

The slideshow on ncbeverages.com/small home page doesn’t display on phones, smaller tables or when I shrink the browser. As you decrease the browser window’s width, the image becomes shorter and shorter after a certain width, until it disappears completely. Thus the slideshow is not responsive on smaller screens.

Also, I would like the slideshow image to scale, not crop.

How would I fix that?

Later I added this to my custom.css, which kind of works, but is there a better way to do it?

.acm-hero {
min-height: 200px;
min-width: 100px;
}

htaccess username: demo
password: demo123

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

#567536

HI
Try this
Add this code in custom.css file


.acm-hero.full-screen {

background-size: cover;
}


Clear cache and check.

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

#732646

HI
Try this
Add this code in custom.css file


.acm-hero.full-screen {

background-size: cover;
}


Clear cache and check.

[nathanciobanu Friend nathanciobanuJoin date: January 2014Posts: 36Downloads:13Uploads:3 Thanks: 9]

#567565

I tried that, but didn’t work. My approach seems better so far, although I don’t like hard-coding px values.

[nathanciobanu Friend nathanciobanuJoin date: January 2014Posts: 36Downloads:13Uploads:3 Thanks: 9]

#732675

I tried that, but didn’t work. My approach seems better so far, although I don’t like hard-coding px values.

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

#567566

<em>@nathanciobanu 469381 wrote:</em><blockquote>I tried that, but didn’t work. My approach seems better so far, although I don’t like hard-coding px values.</blockquote>
HI
As i can see its working fine now >>> http://prntscr.com/6vxm20
with background : 100%
and the code is commented in custom.css
http://prntscr.com/6vxmey

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

#732676

<em>@nathanciobanu 469381 wrote:</em><blockquote>I tried that, but didn’t work. My approach seems better so far, although I don’t like hard-coding px values.</blockquote>
HI
As i can see its working fine now >>> http://prntscr.com/6vxm20
with background : 100%
and the code is commented in custom.css
http://prntscr.com/6vxmey

[Author]

Posts