Can a text box be stretched full-screen beyond the maximum container width?

Sure thing – here’s the site:

The way we want the captions to look is under the hero image on the homepage and says “full width caption test.” The developer who’s helping us achieved this by using Grid Row, 1/2-1/2, with a text box in the right-hand cell. He currently has the row set at no borders, 0px minimum height, and the cells at top alignment, 30px padding all around. I tried resetting the cells’ padding for 0px, but that made the caption text box disappear underneath the photo. With the current settings, there’s too much vertical space between the photo+caption and the “Missouri Arts Council supports the arts” line (which is in a text box within a 1/1 column within a color section). Also, when viewing the page in mobile, a big gap develops between the photo and the caption text. Not good!

We want the vertical spacing between the photo+caption and the heading to look like the Special Programs / Alchemy Award page. I did that caption using by putting a text box inside a 1/1 column inside the color section that contains everything else on the page and setting the column’s top and bottom margins to -50px. Works just great in mobile!

BTW, great theme and support!

Hi, sorry the pages weren’t visible; we’re building the site and I had deleted the slider images. Fixed now.

I figured out how to fix the vertical space between the caption text and the heading – our developer’s CSS for this had set the bottom margin for -20, and I found that setting the bottom for -68px gave me the reduced vertical space I wanted. But I can’t figure out how to fix the mobile responsiveness issue when creating the caption via Grid Row.

So here are the two versions:

Special Programs / Alchemy Award
Caption is flush right with the maximum container width.
Caption is done with Color Section / 1-1 column / text box. In the column settings, margin both top and bottom is -50px, padding is zero.
Caption is fully responsive to mobile. The text remains flush right, and the vertical space between the caption and the photo remains the same height.

Special Programs / Ghost Light Project
Caption is flush right with the edge of the viewing screen.
Caption is done with Grid Row and a Quick CSS code named fullwidthcaption, margin top: -30px, margin bottom -68px.
Caption is NOT fully responsive in mobile. The text remains flush right, but the vertical space between the caption and the photo gets larger so that it develops a big gap.

What I want ideally is the caption flush right with the edge of the viewing screen but no big vertical space between the caption and the photo when viewing in mobile. (If this doesn’t turn out to be possible, at least I have an acceptable nice middle ground with the Color Section / 1-1 column method!)

Okay, I inserted the code in that post into Quick CSS, and now I can create a color section going the full width. But I can’t figure out how to tighten up the vertical space between the two color sections. I think that’s a new issue….

New try – Special Programs / Accessibility
Caption is flush right with the edge of the viewing screen and it’s responsive in mobile. Check!
Caption is done with Full Width Color Section / 1-1 column / text box. In the column settings, the top margin is -50px, bottom is zero.
The color section below the caption color section is set with top margin -50px. I’ve left the top border so you can see where the heading text aligns vertically.

I tried setting the padding to Zero for both of the color sections on that Accessibility page, and it did remove vertical space between the two sections, but it also removed the bottom padding from the second section so that its bottom text was sitting very close to the footer, which I didn’t want. I first tried fixing this by sticking in a Whitespace element of 50px within the column. That worked; it made the vertical space between the bottom text and the top of the footer the same as on pages with no photo caption finagling. Then I tried just setting the column’s bottom margin at 50px. Voila!

So this resolves my issue. Thanks for the pointers! They showed me what to tweak.

And I think I’ll post my workaround in a separate thread. :-)

• This reply was modified 8 years, 6 months ago by missouriartscouncil.