Overlay Problem with Foundation and Jack(Stack)

(Wolf Ademeit) #1

For my actual Project I like to overlay the Jack background image only at mobile devices to make the text better readable. It works, but the overlay don’t fit to the hight of the column.
I use Jack as the container for the image, Target to center the a Paragraph Plus Text that is inside a Grummage Stack.

(Brandon Scott Corlett) #2

Are you applying any padding to the column?

(Andrew Tavernor) #3

The height of the columns is being dictated by their contents (as is normal). You would need to equalize the heights on mobile to achieve what you want.

(Wolf Ademeit) #4

I tried this but it has no effect to the overlay. At mobile devices only one column is visible. Here are some screenshots from my Stack setups:

(Wolf Ademeit) #5

No, there is no padding

(Andrew Tavernor) #6

By default, equalise height is cancelled on mobile screens - that is the problem. This is quite a complex setup but is possible using nested equalize that is applied always.

The space is not padding, it is because the columns (unequalized) are 100% high - which means that they are the same size as their contents - not as their parent.

It may actually be easier to achieve this with sections - it is not exactly your situation but the flex demo show some of it in action (sections has an overlay facility built in to it as well) http://demo.bigwhiteduck.com/sections-flex/

It also makes equalize height easier than using columns within columns to fill the background completely. http://demo.bigwhiteduck.com/sections/eq-height/

Basically, there are 1001 ways to achieve what you want.

(Wolf Ademeit) #7

Thanks a lot Andrew, your assistance is very helpful. I will try sections asap and hope it will work with a TotalCMS image too. Thats why I uses Jack, because it was the only way to fill the image hight into the content. It would be great to have a option at TotalCMS Images to grow to container hight also…

(Andrew Tavernor) #8

I see, the situation becomes clearer - you are using TotalCMS.

You can use a warehoused image in Sections so should just be able to use the TotalCMS path to your image - sections has another feature where you can automatically replace the background image with a colour for mobile screens - which may be of use.

It is really just a juggling act of getting the various things to work. You can of course even add background images directly into the Grummage columns which may be a simple option with nested equalize - it is just very hard to tell without seeing it first hand.

(Wolf Ademeit) #9

Thanks again Andrew for you awesome help. Section did fix my problem, not the way I thought, but it works. BTW Section is awesome too. The way Section allows to control how a image is positioned, should be basic for each Stack that handles images. But I think at the moment there is no other stack that can control that this way.

Maybe you have a solution for the next problem that you can see at my sandbox website too. I like to use JW MovingBox for a Header Slideshow with TotalCMS Images. Using the Section Stack, I can control the hight of the MovingBox, but always a blank Image is added and there is no continuous display (see first MovingBox). With the same MovingBox setup by placing a TotalCMS image direct into the MovingBox I don’t have this problem, but I can’t control the hight of MovingBox (see second MovingBox)