[markwestParticipant]

Hi,

I have a block grid, with two block grid items inside.

I would like to have a vertical line centred between the two block grid items please?

I can add the border to the right hand side of the left block grid item – but then how to get it centred between the grid items?

I’d be grateful if you could suggest the best way to achieve this.

Thanks very much.

Mark

[Prasant RaiModerator]

Hello Mark,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. 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.

Thanks.

[markwestParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi Mark,

Thank you for providing the credentials. Please add the following code in your Customizer:

.x-block-grid.two-up>li {
    margin: 5% 2.5% 0 0 !important;
    padding: 0 2.5% 0 0 !important;
}

Let us know how this goes!

[markwestParticipant]

Hi Nabeel,

I’ve added that CSS but the line hasn’t moved 🙁

Thanks

Mark

[Nabeel AModerator]

Hi Mark,

Thank you for updating the thread. I adjusted the code and added the following code in your Customizer:

.x-block-grid.two-up>li {
    margin: 5% 2.5% 0 0 !important;
    padding: 0 2.5% 0 0 !important;
}

It seems to be working fine now. Please clear your browser’s cache and reload the site.

Cheers!

[markwestParticipant]

Good Morning Nabeel,

Thank you that it perfect.

Please may I ask a couple more questions whilst I have this case open?

– To hide this line when the site goes single column/mobile – would I just add margin: 0; padding: 0 on this element in my @media query?

– I am trying to have the light pink section 2 on the homepage be full width – but I am struggling with widths on the site generally, and even with marginless, containerless column turned on this section still isn’t full width – please could you help with this?

– Once Section 2 is full width I’d also like to remove the white strip between the bottom of section 2 and the footer please?

Thanks again for your help.

Kind Regards

Mark

[ChristopherModerator]

Hi there,

Find this code :

.right-border {
    border-right: 2px solid #e5e5e5;
}

And update it to :

@media (min-width:480px){
.right-border {
    border-right: 2px solid #e5e5e5;
}
}

Please change page’s template to ‘Blank-No container|Header-Footer’.

Hope that helps.

[markwestParticipant]

Hi Christopher,

Thanks for the reply 🙂

Changing the template makes the full-width section work – but it makes the whole content area full width as well 🙁

I’ve tried adding some CSS –

.x-main.full {
display: block;
float: none;
margin-left: auto;
margin-right: auto;
width: 1150px;

But, of course I realise that using a fixed width isn’t going to work well and also this just makes the pink bar cut off at either side again.

I’d like the two sections to sit a little in from the left and right edge of the menu bar – like this page please –
http://2016.thewellbeingclinic.org/news-blog/

Hope you can help.

Thanks

Mark

[markwestParticipant]

Hi Christopher,

I think I’ve managed to sort it now – had to apply a background to the section, turn column containers on and apply the same background to the row – seems to give the result I was hoping for 🙂

Also, thanks for the mobile change.

I have a couple of new questions, hope that’s ok.

Checking through the CSS now I have these two changes and I wonder if they are both required, or if one is redundant:

.x-block-grid.two-up .x-block-grid>li {
margin: 5% 2.5% 0 0 !important;
padding: 0 2.5% 0 0 !important;
}

.x-block-grid.two-up>li {
margin: 5% 2.5% 0 0 !important;
padding: 0 2.5% 0 0 !important;
}

Also, I wonder if it is possible to tweak the main nav-bar at the top – so that the deeper green coloured bar runs full width – but leave the menu exactly as it is now? Is that possible/simple to achieve please?

Thanks very much for your support – I’m sure you hear it a lot (I hope) – you guys are awesome 🙂

Cheers

Mark

[ChristianModerator]

Hey Mark,

Please remove the CSS and check if it affects the block grid in your page.

For the navbar, it is possible but since they are in the same container with the logo, the logo area will become fullwidth as well. It is still possible with CSS though but it would require some more tweaking. Regretfully, further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[markwestParticipant]

Hi Christian,

Thanks for your reply. I would appreciate your advice. I am REALLY struggling with this layout – custom margins, fiddling with x.main x.container … – I’m SURE it shouldn’t be this difficult to achieve the result I’m looking for 🙁

I understand your comments about custom dev – looking through the forum there are other posts on having full width headers with boxed content and I will see if I can make something work.

Regarding the original query, unfortunately it is still not 100% right

The section2 content is narrower (on the right) than the section1 content.

I’ve tweaked the CSS to this –

.x-block-grid.two-up .x-block-grid>li {
margin: 3% 2.5% 0 2.5% !important;
padding: 0 2.5% 0 2.5% !important;
}

which makes it the right width – but now the line isn’t in the middle again 🙁

I have tried with both pieces of CSS in place and it doesn’t seem to make difference, so I have removed the other piece/duplicate.

Would be great if you could help me get this bit sorted and then I can move on with the nav area.

Thanks

Mark

[markwestParticipant]

Further to my last comment, I realised that the second piece does make a difference – without it the top margin disappears – so CSS is now this – but content is back over to the left 🙁

.x-block-grid.two-up .x-block-grid>li {
margin: 3% 2.5% 0 2.5% !important;
padding: 0% 2.5% 0 2.5% !important;
}

.x-block-grid.two-up>li {
margin: 3% 2.5% 0 2.5% !important;
padding: 0 2.5% 0 2.5% !important;
}

[Nabeel AModerator]

Hi again,

You’ll need to remove the leftblock class from your first grid item and also I noticed you’ve changed the border color to white, please change it back to any other color so it’s visible for example:

@media (min-width: 480px) {
.right-border {
    border-right: 2px solid #e6e5e5;
}
} 

Also please add this code back to fix the issue:

.x-block-grid.two-up>li {
    margin: 5% 2.5% 0 0 !important;
    padding: 0 2.5% 0 0 !important;
}
.x-block-grid.two-up>li:nth-child(2n) {
    margin-right: 0 !important;
    padding-right: 0 !important;
}

Hope this helps!

[markwestParticipant]

Hi Nabeel,

In trying to fix this myself I made some changes to the page and CSS within Cornerstone – which was all fine.

But, given your new solution I tried to use WordPress to revert the page to a previous version it left me with a page which I now can’t edit in Cornerstone. It shows all the cornerstone text – but when I try and edit it I get a warning about the contents being overwritten and I get a blank CS page 🙁

Do I need to start from scratch again and re-create the page – am I not able to revert to previous versions?

Thanks

Mark

[Author]

Posts