Misalignment in cornerston 1x3 column row

[VitaliKon]

Hello,

I have tried to align Classic CTA buttoms below three text holding columns so they appear in one line. As you can see I have different content in columns and they are sized accordingly.

When I check what is parsed in webpage I can see that no sign of alignment at all.

Please advise why such descripency and what other solutions would be more appropriate in getting buttoms aligned with each other horizontally. I have no idea why I cant place buttoms either classic or advanced insided the colums just below the text to avoide such issues.

thanks

[thai]

Hi There,

Please add this custom CSS under X > Theme Options > CSS:

.page-id-10253 .x-promo {
    min-height: 480px;
}

Also add the gap above the buttons.

Regards!

[VitaliKon]

Thanks for that.

I need to check why only Paragraph font size can be applied in the promo. I need to increase its font size but when tried to use larger Headings I have undesired empty promo. is it a bug?

Also the when added image I had to increase max height to 800. It appears that image saturation changes from original to highly saturated (blue) in Google. Safaris ok as I edit the site in safari and image is preserved. Not sure where to look for change of saturation. Any advise?

[paul.r]

Hi,

Try to select the text you want to change before selecting from the dropdown.

with regards to the image, looks like a browser issue. Try to check the image itself in your browsers by going to the link below.

Thanks

[VitaliKon]

Hi,

I applied this code in common CSS area and it fixed the issue. However, I created second similar page and the code doesnt provide alignment even when I applied larger min size of 1000px which is working on original page. It doesnt for smaller column size.

[christian]

Your page does not exist anymore. Please check.

Thanks.

[VitaliKon]

Hello,

Im having a huge battle with this silly CTA button and columns

it is impossible to work these two elements in sync. You provided the css Min height code. it worked on some pages but some just give me headache and time wastage.

Please check. 1-2 px difference in column inside the backend is shown in browser frontend as 10-30px gap.

your code

.page-id-10253 .x-promo {
min-height: 1150px;

is it possible to make it 100% working on all pages. I mean is it possible to automate the alignment of the column promo text up to minimum size and align with CTAs flash level.

[paul.r]

Hi,

Regretfully 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.

To give you an idea, you can check the code snippet on the link below

Use Flex Layout | Themeco Docs

Thanks for understanding. Take care!

[VitaliKon]

Can I have your explanation about the product you sell. What you advertised must be followed by that “not all features advertised are working as advertised”.

You made 8Mln in a few years, you hire people like youself on over 100K wages and you say to me that Classic Element and Column allignment is custom design. I think you need to look into your practice of misleading advertisment, develop the base code that support BASICS of elements.
Can I have senior management talking to me? We have many questions to answer.

Actually Paul, your role seems to push back any questions. You are not helping just kicking me out all the time.

[ruenel]

Hey There,

Sorry for the miscommunication. I am another staff checking on this thread. Our elements are perfectly working as intended to be. Each of this element works independently. They will not be align if they do not the same content heights.

To resolve this issue, we will use a custom JS code that will automate to align the promo element. Please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb)

(function($){
	$(window).on('load resize', function(){
		var max = 0;

		$(".x-section").each(function(index, el) {
		 	$(this).find(".x-promo").each(function(index, el) {
		 	    $(this).find(".x-promo").css('height', 'auto');
				if( $(this).height() > max ){
					max = $(this).height();
				}
			});
			$(this).find(".x-promo").css('height', max);
		});
	});
})(jQuery);

Please remove any gap or line element under the promo element so that the alignment of the cta button will be aligned as well.

Thank you for your understanding.

[VitaliKon]

There are still good people in X team. I dont ask a lot, just expect basics to work. I probably could create a separate row with two buttons to male alignment working.
Thanks very much.

[ruenel]

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

[VitaliKon]

Hi,

I have this strange behaviour. If you check my section Video Analytics you can see that I dont have much text in promos but the column size is not shrunk to some reasonable height. I impemented JS advised, seems working for even this page for VMS section and other pages.

Would you have a tip for me or I may need to do modification of JS? Basicaly, any longest text should drive the height of the all columns in the raw to make it estethicaly looking good.

sorry to tell you.

[rad]

Hi there,

Please update your JS code to this

(function($){
	$(window).on('load resize', function(){		

		$(".x-container").each(function(index, el) {

            var max = 0;

		 	$(this).find(".x-promo").each(function(index, el) {
		 	    $(this).find(".x-promo").css('height', 'auto');
				if( $(this).height() > max ){
					max = $(this).height();
				}
			});

			$(this).find(".x-promo").css('height', max);

		});
	});
})(jQuery);

This should apply the maximum height per row only instead of globally.

Thanks!

[VitaliKon]

you/ve made my day. so greatful to you. thanks and Happy New Year!

[ruenel]

You’re welcome!
Happy New Year too!