Grummage 2Col help

Big White Duck
1

Hi all,

I’m using a Grummage 2Col stack here - https://www.tildensltd.co.uk/page/

The left hand column is an image
The right hand column is some HTML

When the columns stack at the mobile breakpoint, the image centres nicely but the HTML stack is ranged left. Is there a trick to get the HTML stack to centre underneath the image stack?

Thanks

Rob
P.S. I’ve tried replacing the HTML stack with an image and a link but it seems to break the validation.

2

The div in your HTML stack needs auto left and right margins to centre.

#stacks_in_3_page12>div{
    margin: 0 auto!important;
}

Obviously this id is unique to that example you posted. If you change out the HTML stack you will need to change the id

3

Cheers Andrew. Could I put it inside Joe’s CSS box stack and then give it a ‘proper’ div, do you think?

Rob

4

You don’t need an additional CSS box. Grummage 2col has custom class settings for each column.

If you give col 2 a custom class of center-html then the following CSS will work with any HTML stack you drop in

.center-html .stacks_in html_stack>div{
margin: 0 auto!important;
}
5

Ah, of course it does - down the bottom. Thanks Andrew!

1 Like
6

Me again. I’ve added the class and dropped the CSS into the site wide code box but it doesn’t seem to be doing the trick. Is it because the HTML stack is inside a partial by any chance?

You can see the live page here - https://www.tildensltd.co.uk - in the footer.

Thanks

Rob

1 Like
7

No, it is because there is a typo in my code above.

I missed the full stop between the two class names:

.stacks_in.html_stack

Just change the space for a period and it will work.
Sorry (and thanks for the donation)

1 Like
8

No prob. Thanks for the help. All good now.

Rob