Background of Columns

Support
#1

re: http://146test2.co.uk/mh

Scroll down to the section - About Use | What we do

1 - I would like the right hand column to be #333333 all the way across. At the moment, because i have the content contained, it shows the background of the row. I want the colours to go to the edge and be split as they are.

Thanks

#2

Hi @onefoursix,

Thanks for writing in.

As of now, I could only think of is using a background image with a green on the left side while #333 on the right side because you are not using a full width setup.

Please share us your admin credentials in a secure note so we could fully your current setup and probably work another way to create it without using the background image.

Thanks.

#3

I have tried to apply:

background-image: url(http://146test2.co.uk/mh/wp-content/uploads/2017/07/Grey-background.jpg);

… to the column and it isnt working… any ideas?

#4

Hi There,

Please add:

background-color: #333333;

to the Style box of the column.

Let us know how it goes.

Thank you!

#5

Doesnt work… I need it to stretch to the edge of the screen…

#6

Hi There,

Everything should be fine now.

I changed the left & right padding of your columns.

Regards!

#7

However I wanted the text to be in line with the rest of the text on the page… hence me containing it. Any ideas please?

#8

Hi,

Please clarify, it looks really good on my end.

Cheers!

#9

The edges of the text of “About us” and “what we do” dont line up with the edges of the “our therapists” below, and the services above.

it looks messy.

1 Like
#10

I have the exact same issue, I wish to have two columns with different backgrounds that are full width but the text and title need to be contained like the other sections.

I would love to know if you figured this out! :slight_smile:

Cheers

#11

Hi There,

O the row where you have two columns you have turned off Column Container and added 6% padding left on the left column and 6% padding right, on the right column.

On the row below, you have active Column Container.

I would suggest you turn off the column container of the row below and add 6% padding to each side.

Hope it helps

#12

I would just like to add this solution for a similar if not the same issue - https://theme.co/apex/forum/t/full-width-column-background-with-contents-contained/2957/3

:slight_smile:

#13

Hello @Zenako,

Thanks for updating this thread and for sharing the solution which might help for this thread.
Best Regards.

@onefoursix:
I have created a test page for you. I applied the solution from the other thread. I followed the same logic but with different numbers. Since the maximum content width is 1200 pixels, I added an inline css for each text element of roughly 550 pixels. I reserved 50 pixels for the column padding.

You can check it out here: http://146test2.co.uk/mh/an-x-test/