Docs

[TheLunchBawx]

Hi.

I have 2 questions about columns. 1st one is spacing in columns is a issue for me. I’m trying to make a pricing table like this: (https://i.gyazo.com/9966106960c1cf87b85cb2fcb21302a7.png) as you can see the button and text is aligned perfectly on both columns but on mine it looks like this: (https://i.gyazo.com/ca63b4b5c963adf04f781fa5cd975e50.png). Is there a way I can get them aligned like the first image?

2nd question, is there a way I can reset the fade in effect on columns when someone scrolls up past them?

Thanks.

[Jade]

Hi there,

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.

[TheLunchBawx]

This reply has been marked as private.

[Christopher]

Hi there,

Please provide us with exact URL where you have pricing table element.

In regards with fade effect, regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks.

[TheLunchBawx]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the customizer:

.page-id-1206 #x-section-5 .x-column h6 {
    min-height: 30px;
}

Hope this helps.

[TheLunchBawx]

Hey.

That worked perfectly for section 5 but I’m wondering about section 2.

Thanks!

[Paul R]

Hi,

I think you are referring to section3.

You can add this under Custom > Edit Global CSS in the Customizer.

.page-id-1206 #x-section-3 .x-text p:nth-child(2) {
       min-height: 230px;
}

Hope that helps.

[TheLunchBawx]

Hey.

That worked! Thanks so much for the help.

[Rue Nel]

You’re welcome!
Thanks for letting us know that it has worked for you.

[TheLunchBawx]

Just tried both code snippets you gave me and it didn’t work for my new set of sections (11 through 13).

Could you give me some updated code for the FAQ sections?

Thanks so much.

[Rue Nel]

Hello There,

Thanks for updating in! I have checked your page and I actually noticed that you do not need any code for your text to be of the same height. What you really need is to make the column heights the same. To resolve that issue, please edit your page in Cornerstone, go to the settings tab, Settings > Custom JS and insert the following custom js code

jQuery(document).ready(function($) {
  $(".x-section").each(function(index, el) {
	var max = 0;
	$(this).find(".x-column").each(function(index, el) {
		if( $(this).height() > max ){
			max = $(this).height();
		}
	});
	$(this).find(".x-column").css('height', max);
  });
});

The output should have something like this: http://prnt.sc/djzvph

Hope this helps.

[TheLunchBawx]

Hey.

Alright that worked. Now I am having trouble with another section. I have them the same height and I tried using the CSS and the JS but both don’t work for this section. Here’s a screenshot: https://i.gyazo.com/254f9bf24c2d3cfeeb524df9875904d5.png

Thanks so much for the help.

[Rue Nel]

Hello Again,

Could you please provide us the url of the page with the column height issue? 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.

Thank you in advance.

[TheLunchBawx]

Hello.

Yes, here it is: http://thelunchbawx.com/order/

Thanks again.

[Author]

Posts