Hello-
Please see this thread:
This JS that I added in cornerstone works for phone but it does not work for tablet. Please advise and thanks you.
Here is the code FYI:
jQuery(window).on(“resize”, function () {
var max = 0;
jQuery(".e213-29.x-container .x-column").each(function(index, el) {
if( jQuery(this).height() > max ){
max = jQuery(this).height();
}
});
jQuery(".e213-39.x-container .x-column").css(‘height’, max);
}).resize();
Hi Kim,
Thank you for writing in, if you want your columns to be of equal height, please turn on the Marginless Columns option of the ROW.
Just add left and right paddings to your Columns so the content does not look too close.
If this does not solve your issue, please provide us the direct URL of the page where we can see the issue closer.
Cheers!
hello-
It is apparent you did not click on the thread I linked to in my initial request. Please look at that as it describes a completely different issue than what you are addressing. That forum also has the direct link you are requesting. Please advise.
Would be perfect if I could just continue on that thread but it is closed.
Hi Kim,
I see the issue you’re having here.
Try utilizing our responsive text feature so that you can reduce the font size to fit on different screen sizes.
Please check the following post to see detailed guide (https://theme.co/apex/forum/t/need-help-with-responsive-text-in-x-theme/13920/5?u=mldarshana).
Hope that helps.
thank you @mldarshana . using responsive text makes the font unreadably small.
I’d like to it to do what it does on phone where it becomes one row (see link):
https://leadas.love/wp-content/uploads/2018/08/IMG_D92E9F80E5ED-1.jpeg
Is there any way to edit the provided JS code to incorporate tablet sizes?
Hello There,
Please have your JS code updated and use this:
(function($){
$(window).on("resize", function () {
var max = 0;
$(".e213-29.x-container .x-column").css('height', "auto");
$(".e213-39.x-container .x-column").css('height', "auto");
$(".e213-39.x-container .x-column").each(function(index, el) {
if( jQuery(this).height() > max ){
max = jQuery(this).height();
}
});
$(".e213-29.x-container .x-column").css('height', max);
$(".e213-39.x-container .x-column").css('height', max);
});
})(jQuery);
Please let us know how it goes.
YES! thank you thank you!!
You’re most welcome.
Please note that the JS code provided above is specific to your current setup. If you delete some of the sections, the code above will not work as intended.
Thanks for the heads up. I seem to be having issue with it however- it loads late. The page, when I first bring it up on ipad shows the text overflowing from the boxes…but then after I scroll down a bit it adjusts and the text appears in the boxes. Please advise and thanks.
Hi again,
Please replace the previous code with the following code:
(function($){
$(window).on("load resize", function () {
var max = 0;
$(".e213-29.x-container .x-column").css('height', "auto");
$(".e213-39.x-container .x-column").css('height', "auto");
$(".e213-39.x-container .x-column").each(function(index, el) {
if( jQuery(this).height() > max ){
max = jQuery(this).height();
}
});
$(".e213-29.x-container .x-column").css('height', max);
$(".e213-39.x-container .x-column").css('height', max);
});
})(jQuery);
Don’t forget to clear your browser’s cache after adding the code.
As mentioned above the JS code provided is specific to your current page setup. If you change your markup (add or remove sections or columns) the code provided above will not work as intended. You should give classes to your columns or sections and then use it in the above code so it always works.
To find out the right selector to be able to write the required JS / CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.
https://developers.google.com/web/tools/chrome-devtools/css/
Let us know how this goes!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.