Hi, I'm having an issue getting FlexSlider's containers to accept the percentages that adjust my theme's (a slightly customized version of CorporateClean) responsive width. I'm trying to use background images to create a half page slider. I've attempted to adjust the divs in flexslider.css to be set for 100% width, and to have background: cover; set up for div > li, as well as attempting a few suggestions I found on various other sites, which suggest using height adjustments. Nothing I've done has fixed the issue I'm having. Is there a way to force FlexSlider's containers to conform to responsive full width in Drupal - similar to what it would look like on a static HTML page? Thanks.

Comments

t.a. barnhart’s picture

t.a. barnhart CreditAttribution: t.a. barnhart commented

same problem: the flexslider box is over 800px wide; the image style (which i understand is irrelevant?) is 600x300 (the image is bigger; using Focus scale & crop). css for the image is "max-width: 100%; width: auto; height: auto;"

the slideshow presents images at 428px wide - and Inspect shows me this is because of "element inline" is 428px.

wtf? how hard can it be to let FS just do what i set it up to do?

----
i replaced the original image with one sized to 600x300, the size i want for the Flexslider. still being being reduced. i compared to another site using FS, and the "element" attribute is not being applied.

droddis’s picture

droddis CreditAttribution: droddis commented

I'm not sure if this will be helpful but I've solved in this in the past by making the region itself fluid width. I use Omega for my base themes and then am able to use the following CSS to make the entire region full width, without distorting anything else on the page.

.zone-header-wrapper.fluid, .fluid.container-24, .fluid.container-24 .grid-24 {
width: 100%;
margin-left: 0%;
margin-right:0%;

}

With the combination of Delta and Omega theme I'm able to be very surgical with the classes I apply to specific pages and regions. Hope this helps.

joegl’s picture

joegl CreditAttribution: joegl commented

If you want the image to be full-width the CSS for the img needs to have width: 100%;height: auto;. width: auto; will only keep the img at whatever size the image file is at. I am not sure if that will fix the issue for OP but I thought I would add input and I hope that it's helpful.