Uneven boxes pages

Support
#1

Hi

I have a website on www.envirofwa.com

The boxes on the following page http://envirofwa.com/kitchen-duct-cleaning-northern-ireland/ are two different sizes on different screens and i just want them to stage the same size on different screens - just as two of them are uneven

#2

Hey @envirogroup,

Thanks for writing in!

Always use SECURE NOTE while providing login details, If you share login details without using Secure note, your credentials will be visible to public. Use secure note for posting credentials or any sensitive data in your future posts. At present I have edited your thread and added login details to Secure note.

For portable devices container will scale it’s height to compensate for the constraints it faces in terms of width. Here text contents breaks according to window size which causes uneven boxes. You may need to define media query to control height. Inspect page element and adjust height as per window size and add it to media query CSS.

You can visit following CSS to get idea about media query : https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Add a class to the columns and design media query for different window sizes and add CSS to Global CSS section in theme options.

Hope this helps.

Regards

#3

Hi Sorry I am so confused. Could you maybe do this for me ? or even explain in more detail

#4

Hello There,

I have edited your page and added this custom JS in Cornerstone custom js section, Custom JS

(function($){
	$(window).on('load resize', function(){
		var max = 0;
		$("#x-section-2 .x-column").css('height', 'auto');
		$("#x-section-2 .x-column").each(function(index, el) {
			if( $(this).height() > max ){
				max = $(this).height();
			}
		});
		$("#x-section-2 .x-column").css('height', max);
	});
})(jQuery);

Please check your site now.

#5

Hi

Thank you. However if you can check http://envirofwa.com/kitchen-duct-cleaning-northern-ireland/ on the desktop the writing is now off the white box? I have also these white columms on other pages throughout my website including landing pages. Can you advise on these problems?

#6

Hi again,

Please replace the previous script with the following code:

(function($){
	$(window).on('load resize', function(){
		var max = 0;
		$("#x-section-2 .x-column").css('height', 'auto');
		$("#x-section-2 .x-column").each(function(index, el) {
			if( $(this).outerHeight() > max ){
				max = $(this).outerHeight();
			}
		});
		$("#x-section-2 .x-column").css('height', max);
	});
})(jQuery);

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#7

Thank you this has made all the boxes the same sizes. However i need to make columns bigger as the writing is going outside them on some versions?

#8

Hey there,

It looks like you’ve not followed the previous reply. Please replace the script with this:

(function($){
	$(window).on('load resize', function(){
		var max = 0;
		$("#x-section-2 .x-column").css('height', 'auto');
		$("#x-section-2 .x-column").each(function(index, el) {
			if( $(this).outerHeight() > max ){
				max = $(this).outerHeight();
			}
		});
		$("#x-section-2 .x-column").css('height', max);
	});
})(jQuery);

This should resolve the issue. Do let us know how this goes!

#9

Hi

I have inserted in the following could in global java script and the writing is still going outside the box. Could you take a look?

#10

Hi again,

Please use the code that I’ve given to you and remove the previous code, you’re again using the old code. Make sure you copy and paste this code:

(function($){
	$(window).on('load resize', function(){
		var max = 0;
		$("#x-section-2 .x-column").css('height', 'auto');
		$("#x-section-2 .x-column").each(function(index, el) {
			if( $(this).outerHeight() > max ){
				max = $(this).outerHeight();
			}
		});
		$("#x-section-2 .x-column").css('height', max);
	});
})(jQuery);

This will resolve your issue regarding text going outside the box too. Thank you!