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.
