Float column on top of white space below

Here is the page I am having trouble with: https://www.datafreedoms.com/our-mission/

I have two problems with this page:

1) I need the white text column to have “max-width: 750px;” and positioned in the middle of the row. I tried adding “max-width: 750px; margin: auto;” which restricted the width, but it was floated left and not in the center on the page. How can I make it max-width: 750px and centered?

2) I’m trying to push the white text column downwards so goes over the edge of the section and it sits on top of the white space below. I have somewhat achieved that by giving the rows this custom CSS:

$el {
 bottom: -130px;
}

But the problem is that the top section with the blue background sits too far down. I need the bottom edge of the blue section to be much higher.

Here is a picture which explains what I’m trying to do:

Hi @thecashbag,

Thanks for posting in.

Please remove the background styling to your section, instead please add this CSS to your section’s element CSS

$el > [class^="x-bg"] {
    background: rgb(0,8,81);
    background: -moz-linear-gradient(top,rgb(0,8,81) 0%,rgb(28,181,224) 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgb(0,8,81)),color-stop(100%,rgb(28,181,224)));
    background: -webkit-linear-gradient(top,rgb(0,8,81) 0%,rgb(28,181,224) 100%);
    background: -o-linear-gradient(top,rgb(0,8,81) 0%,rgb(28,181,224) 100%);
    background: -ms-linear-gradient(top,rgb(0,8,81) 0%,rgb(28,181,224) 100%);
    background: linear-gradient(to bottom,rgb(0,8,81) 0%,rgb(28,181,224) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000851',endColorstr='#1cb5e0',GradientType=0 );
    height: 400px;
}

Thanks!

Thanks that has helped with the background height.

But problem 1 is still not solved.

How do I give the column a max width and float it in the middle?

Hi there,

I am not sure if I understood the problem, It is centered and restricted:

Would you please give us more detailed information about what you want to achieve? As I see it is already done.

If it helps kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case.

Thank you.

The big white column of text is too wide. I want to restrict the width of that column (e.g. 700px wide). And when it is skinner make it sit in the middle of the row (equal distance on the left and right hand sides).

Here is a pic if that helps.

I dont know how else to explain it sorry. Please tell me which part you dont understand and I can try explain that part better.

Hi there,

Add this to the 3rd row’s element CSS (not section nor column).

$el {
max-width: 700px;
}

Hope this helps.

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