New to the community? Start here

UPFRONT/SCRIBE Need a text overlay on background slider images

I have a need to run a full width slider with a text overlay. The slider option when editing the background does not seem to give me that option.

Even a wider region (1366px or 1920px) for placement of the Slider w/Caption element would be ok. I’ve tried adding a “100% width” region so that I can place a slider w/caption within that region. I’m able to setup the slider w/caption text ok, but the region is only 1080px side and I am unable to determine how to resize the region. Setting the global background width in theme settings to something like 1366px does not seem to have an effect.

A nudge in the right direction would be much appreciated. Thanks.

Sat, 9 Jan 2016 0:29:33
  • Luís Lopes
    • QA

    Hi @scott_wood,

    I hope had been good today!

    Honestly, I only see one option, force the region and their elements to use 100% of the space using custom CSS.

    We need to force the region wrapper (.upfront-grid-layout) and slider images to have 100% width.

    I use your main site (wis-dev.com) as an example:

    #upfront-region-container-test-slider-region .upfront-grid-layout, .uslide-image img {
    
width: 100%;
    
}
    

    
#upfront-region-container-test-slider-region .upfront-output-object{
    
padding:0 !important;
    
}

    Add this CSS code in the “add custom css rules”.

    I hope this information has been helpful. If I can help you in this or other questions, please let me know!

    Cheers, Luís

  • scott_wood
    • Site Builder, Child of Zeus

    @Luís – apologies, we’re almost there. The height of the slider is not resizing with the width and is staying full height in a responsive mode. Any ideas which css element controls this behavior?

    I’m searching via firebug but have not been able to identify the right one yet.