Controlling the width of the rainbow bar inside a column

I was trying to do a little esthetic tweak to my page and the explanation ended up being a little longer then I expected. I hope it is not too hard to follow what I am asking! My issue is I built a design with some rainbow bars that match the colors of the illustration at top and this effect works pretty well on a smaller size screen but it doesn’t line up so well if I view it from a large screen, the bars will go way past the image. They stretch out to full width of the column (which is two columns equally spaced.) I know I could use a float stack which would allow me to set both the image and rainbow at the exact same pixel width but this would mean that the content on the right side would flow beneath.

I was hoping to have more open space below the image so the layout doesn’t get too crammed. The column that is there currently also gives the option to force everything down to one column on mobile and I don’t think float stack has that ability. Rainbow lets you change the margin and padding but an exact pixel number for those two things won’t help it line up anymore either since the column sizing it by a percent of the the full column (which in this case half.)

I’ve been kicking this basic idea around for a couple months but I couldn’t quite figure out how to force the rainbow to stop at the end of the image other then by using a float stack. I hope this question isn’t too difficult to understand! I just want it to look a bit like a picture frame which doesn’t have two long bars sandwiching a narrow image. To see the effect I am trying to pull off just the page’s window narrower and the bars will start to line up to the image.

You could set a max-width for the content in that column using a Max-Width tool. Or you could opt for the image to upscale to 100%.

1 Like

The 100% scale looks like it should work for this. It might be one of my only options in Foundry 2. I downloaded Foundry 3 this week so I’ll also look into the max-width tool. Looks like it might have good improvements over the container stack.

Container does the same thing as Max-Width. Instead of Max-Width you can use Container in its place for Foundry 2.

Okay, good to know the change of terminology.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.