Colour background inside a Foundation column

Classic Stacks
1

Hello everybody,

I am going through some re-styling (…for the better) on my site.

I am using RW8 with Foundation theme

I have a 2 column stack that I want to optimise aesthetically.

  • I have put an image background on the 1 column wrapper of the two daughter columns. The image is the “Salad Bowl”.
  • On the second column on the right (column ratio is set to 8:4 Tablet+ and 12:12 on mobile). I would like to set a solid green colour background.

I show you how I am looking now:

00
002560×1050 451 KB

What I would like to achieve is to have that background green colour inside the column stack on the right shown nicely throughout the whole height of the parent stack.

Is that possible? How can I achieve that?

I also have Wallpaper stack by @joeworkman that might do the job nicely although I tried to play with the settings, but couldn’t figure it out.

This is a screenshot showing the Edit mode

01
012560×1600 679 KB

Thanks for any suggestion :slight_smile:

Have a lovely day.

2

This would probably do the trick

2 Likes
3

Place the stack inside a BWD Sections Pro stack and use the child stack to apply a background colour.

Paul

1 Like
4

Hello Gary,

thanks for your suggestion. I downloaded the stack, but it doesn’t seem to do the trick unfortunately.

I show you the settings on Edit mode:

49
492560×1600 691 KB

Still when I preview is exactly the same as the picture I posted before.

5

Hi Paul,

This is what I have done. Can you guide me please?

  • I put the right column inside the Sections Pro stack. If I select the background colour inside Sections Pro this is how it looks like:

04
042560×1384 728 KB

I had a look at the many settings in Sections Pro, but I couldn’t find the right one. Did I miss it?.

Do I need to do that within Sections Pro among one of these settings?

45
451390×1418 217 KB

I noticed that there is a + button in the stack and a “background” option. And when I click on it a background color stack shows up with just a few settings. When I select the colour I want within this stack like this…

00
001390×1418 185 KB

…When I preview the right column doesn’t show any colour: it is just white.

What am I missing here?

Thank you :slight_smile:

6

Did you watch the videos? Or look at the demo files?

1 Like
7

Match height will definitely do what you want, you just need to use it properly. Joe has videos available and also sample project files.

1 Like
8

Adriano

Having reread your original post I agree with Gary,Joe and Scott in that Match Height is what you want and for sure you do need to watch the vids which are immensely helpful.

Paul

1 Like
9

Hello Joe,

Thanks for tuning in.

I watched the video and had looked at the demo files. Very helpful, thank you.

It works fine when matching the height of the 2 columns inside the parent stack, BUT I am not being able to adjust the child stacks to the parent, one column stack.

Please can you help me with this?

Have a look at my Edit mode:

08
082500×1600 591 KB

This is where I am at:

  • I have set the Match height to “match-height ID” on a SINGLE rule and put the right column inside it
  • Then I wrapped the whole 1 column stack with the Match Column and ruled the match ID in it.

The result is exactly the same as the picture I have posted previously. The green background of the right column is not fully covering the whole parent 1 column stack’s length…

10

I have now sorted out this issue.

Thanks everybody for your support really !

For your reference I have resolved by using BWD sidebar stack + the overlay colour.
Need to tweak a few things in it, but the main layout is done :wink:

57
572560×954 431 KB

Happy Weaving to all :slight_smile:

2 Likes
11

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