… the image is at 100% height of the wrap even though it is only set to ‘max H = 100%’. This is pushing the top of the image and the text outside of the wrap. How could I make it so that they both dynamically share the vertical space of the wrap like a DIV would if you set that to ‘Height = 100%’
Its almost like I want the height of the image to be 100% - 50px (50px = the vertical space taken up by the text below it) but itd be nice if it just shared the space dynamically like a DIV would if you set that to ‘Height = 100%’
if you are still unsure of my desired outcome or have any questions please ask and I will get back to you as soon as I can.
A couple thoughts. On your Content Space, you’ve constrained the height to 100%. This means that the Content Wrap is unable to expand to accommodate what is inside. I changed the value here to be 100VH (vh is important rather than percent, and I put it in the min height category). This may help, but may not be exactly what you want.
A second solution is, rather than use an image block for the text, choose a div block, then make the background the .svg text file, set it to contain, and tile only once. Set the dimensions to 100% w, 100% h. And this seemed to work. That is, it fills up to 100% of the space allowed it.
I do want the size of the image and type to be constrained by the size of the wrap DIV as to accommodate the nav bar and some padding around the content. changing the wrap height to 100vh does this.
I have tried the DIV with a background image but as you can see here the issue with that is that you have to set the DIV to 100% width and height, as the size of the background image is driven by the size of the DIV and no the other way around. This pushes the blue text down to the bottom of the wrap [first image]. where as I would like the blue text to sit just under the big type image. [second image]
I meant change the height of the Content Space to be 100vh, rather than the Content Wrap. Truthfully, I have no idea why this works, but I’m testing it at the moment, and it seems to result in what you want.
I hear what you’re saying re the background image, and can’t see an immediate fix.
Ah I see my bad. Are you changing anything else or just those values on the Content Space? Are you removing the padding in the wrap?
It does look like it works, I have a feeling that that is a coincidence with the aspect ratio of the image. Once you once you remove the padding on the Content Wrap and try to add more padding to the Content Space you just get the same problem. (im thinking about how you would then format the content to stay within the browser window, including the nav bar at the top. as I would like this to stay fullscreen)
Basically, it seems you’re able to constrain the horizontal easily enough, but not the vertical. In the set up you have, perhaps a work around is to limit the image height to something like 80vh - a number that accounts for the margins. All heights could be set in a value of VH. The padding could also be done this way.
