Docs

[mathijs84]

Hi there

On nvision.work-planning.com i am trying to create this section: http://prnt.sc/b05ozc

So with blocks in differents heights.

HOw can i do this with X?

[mathijs84]

I got pretty far already, if you scroll down the homepage.

It is the section with the header GEEN EENHEIDSWORST

Now all i need is, because i made marginless columns to have the text be a little more away from the border.

And in the second column you see the background color is under the picture. I want the column to stop at the bottem of the picture and not show some color underneath it please!!

[Rahul]

Hello There,

Thanks for writing in! To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

To do this, you can make a post with the following info:
– Link to your site

– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you.

[mathijs84]

This reply has been marked as private.

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

div#x-section-8 .x-column.x-sm.x-1-2 h2.h-custom-headline.h3,
div#x-section-8 .x-column.x-sm.x-1-2 .x-text.cs-ta-left {
    padding: 0 40px;
}

div#x-section-8 .x-column.x-sm.x-1-2 a.x-btn.x-btn-global {
    margin: 0 40px;
}

div#x-section-8 .x-column.x-sm.x-1-2:nth-child(2) hr.x-gap {
    margin: 100px 0 0 0!important;
}

Hope this helps – thanks!

[mathijs84]

Yeah that is great thanks!!

Only if i change the page will it still work with the div called x-section-8? Could i maybe add a classname ?

Or isn’t it a problem

[Christian]

It would be best to add a class to your section and change div#x-section-8 to .your-class so the CSS code will work site-wide.

Thanks.

[mathijs84]

Ok works thanks!!

Only 1 thing remaining.

If you watch the area on a big screen you still see some blue underneath the picture with the glasses….

Can we get rid of that ?

[Paul R]

Hi,

To get rid of it, you can add this under Custom > Edit Global CSS in the Customizer.

.home #x-section-8 .x-column.x-1-2 {
    position:relative;
}

.home #x-section-8 .x-column.x-1-2:nth-child(2) {
    position: absolute;
    bottom: 0;
}

Hope that helps.

[mathijs84]

Nope that is not is, because it will make the top of the right column move down so it wont be even at the top anymore

[Joao]

Hi There,

On Cornerstone you can add around 2% padding-top on the second column (The one of the blue section with the sunglasses.

This way your image will fit perfectly at the bottom while the content of the blue part will still be in balance.

Please see img attached.

Hope that helps,

Joao

[mathijs84]

yes thqt’s good.

I have a 27 inch screen. If you have the browser at full screen you will see a blue section appearing underneath the image of the right column

[Paul R]

Hi,

You can try this code instead.

.home #x-section-8 .x-column.x-1-2 {
    position:relative;
}

.home #x-section-8 .x-column.x-1-2:nth-child(2) img {
    position: absolute;
    bottom: 0;
}

Hope that helps.

[mathijs84]

Yeah great thanks!!! I like the section a lot.

I tried to recreate it on streamads.work-planning.com.

Named the section blocks and added the same html. But it doesnt work, only the first header changed but the rest stayed the same.

what should i change in that code:

.blocks .x-column.x-sm.x-1-2 h2.h-custom-headline.h3,
.blocks .x-column.x-sm.x-1-2 .x-text.cs-ta-left {
    padding: 0 40px;
}

.blocks .x-column.x-sm.x-1-2 a.x-btn.x-btn-global {
    margin: 0 40px;
}

.blocks .x-column.x-sm.x-1-2:nth-child(2) hr.x-gap {
    margin: 100px 0 0 0!important;
}

[Rupok]

Hi there,

Thanks for updating but your given site is not loading properly on my end – http://prntscr.com/b2f1u8

Could you solve this first?

Cheers!

[Author]

Posts