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.
Are you applying any padding to the column?
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.
1 Like
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:
No, there is no padding
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.
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…
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.
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)