Brandon Creek

Serious problems with Responsive setting.

3 posts in this topic

I am having some weird problems with this module. I am wanting a slider that is 1920x450, and I would like for it to scale itself down for smaller screens.

When I set the settings as:

Slideshow Options

Width: 1920

Height: 450

Layout Settings

Responsive: No

I get this http://i.imgur.com/XCuUX1W.png which looks correct when displayed fullscreen on a 1080p display. However, when you scale the browser down, this happens http://i.imgur.com/v...VnXWy4.png

As you can see, the browser is cropping in to the slideshow, while everything else is adjusting properly.

When I set the settings as:

Slideshow Options

Width: 1920

Height: 450

Layout Settings

Responsive: Yes

I get this http://i.imgur.com/FVRrw1X.png

One of the forum posts suggested setting the width to "auto" when using responsive setting, so when I used these settings:

Slideshow Options

Width: auto

Height: 450

Layout Settings

Responsive: Yes

I got this http://i.imgur.com/xdb282O.png

Could someone please tell me what it is that I might be doing incorrectly? I really would like to get this figured out seeing as I paid for this module solely for the Responsive feature. Please help.

Website is http://www.clips-hairstudio.com

Share this post


Link to post
Share on other sites

Update: I managed to manipulate my template.css file with parameters to allow it to center within different sized windows. However, I still haven't figured out how to make it truly responsive.

@media screen and (max-width:1680px) {

.mod_btslideshow_pro {

margin-left:-6.5% !important;

}

}

@media screen and (max-width:1600px) {

.mod_btslideshow_pro {

margin-left:-8.5% !important;

}

}

@media screen and (max-width:1440px) {

.mod_btslideshow_pro {

margin-left:-12.5% !important;

}

}

@media screen and (max-width:1366px) {

.mod_btslideshow_pro {

margin-left:-14.5% !important;

}

}

@media screen and (max-width:1280px) {

.mod_btslideshow_pro {

margin-left:-17% !important;

}

}

@media screen and (max-width:1152px) {

.mod_btslideshow_pro {

margin-left:-20% !important;

}

}

@media screen and (max-width:1024px) {

.mod_btslideshow_pro {

margin-left:-23.5% !important;

}

}

Share this post


Link to post
Share on other sites

HI Brandon.

To fix problem you need to do these:

1. Remove "min-width: 960px" CSS property from body selector in file /libraries/gantry/css/gantry.css on line 13th. It makes your site can be smaller than 960px

2. Remove "float: left;" property from /libraries/gantry/css/grid-12.css on line 9th.

Or at least, you should make the Div element that contains BT Slideshow not float left.

The module can be responsive if i remove 2 styles.

Please check it by your self.

Thanks

Share this post


Link to post
Share on other sites