Browser zoom problems/issues

Support
#1

Hi everybody, I am for the most part finished with my website now and I am just starting to make the finishing/final touches… adjust for screen sizes / mobile, fix site issues occurring across different browsers, and now I am realizing a third thing which is when the browser zoom function is applied some problems are manifesting. I figure the best way to go about these 3 things is in reverse chronological order of how I just listed them (correct me if I’m wrong).

So, as for the browser zoom function (I am in Chrome) please visit my site and notice that when the browser is zoomed to, let’s say 125%, there are two issues. The first issue is that the classic cards in the Join section become elongated causing the photos to not fill properly… if possible, I would like the size of the cards to stay consistent for this fix, rather than stretch the photos to fill the elongated cards. The second issue is that there is a white space at the bottom of the footer.

I have custom CSS for the cards and footer located in Content and Options respectively… if you need to check it out.

Thanks!

#2

Hi there,

Thanks for writing around! To fix both of your issues, please add the following code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.x-face-outer.front, .x-colophon.bottom {
    background-size: cover !important;
}

Let us know how this goes!

#3

Awesome, fixed everything. Thank you very much!

#4

Glad we could help.

Cheers!

#5

Actually I do have one more issue that is taking place when the page zoom is applied. In the Join section, when the page is zoomed (let’s say 125% again as example)… the cards become all different sizes due to the varying levels of text that I’ve entered into each one. What is the right way to fix this?

#6

Hi there,

It looks same in 125%, in 150% the size differs. I think you don’t need to adjust for 150% as it’s not a normal case.

Best regards.

#7

In my browsers, 125% zoom messes up the size consistency of the cards… probably because I’m using a smaller screen size than you, right? But yea… I’m not trying to go up to 150%. That would be pretty abnormal if somebody’s using that level of page zoom. I would like to get this fixed for a 125% zoom setting though. Is there a code that can keep the sizes of the cards the same?

Thanks,

Jake

#8

Hey Jake,

You can add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function sameHeightSection(section) {
	debugger;
	var max = 0;
	var sections = jQuery("." + section);
	sections.each(function(index, el) {
		if( jQuery(this).height() > max ){
			max = jQuery(this).height();
		}
	});
	jQuery("." + section).css({
		'height': max, 
		'min-height': max, 
		'max-height': max
	});
}

jQuery(document).ready(function($) {
	sameHeightSection('x-card-inner');
});

jQuery(window).resize(function(){
	sameHeightSection('x-card-inner');
});

As you see this requires custom development and the code I’ve provided serves as a guide only. We won’t be able to support any issue caused by the code I’ve provided, If you need in-depth changes You may wish to consult a developer to assist you with this.

Thanks for understanding. Take care!

#9

Wow, you guys are teaching me Javascript now? Thanks a lot. This might be a little over my head but I will try to play around with it if I can. Thank you.

#10

Let us know how it goes.

Thanks.

#11

Ok, I found a code on the forums that works great. It sounds like this JS stuff is tricky… I see the support had to go back and forth with alterations to the code. Much appreciated. If anybody is looking for the JS code to keep all card sizes the same… go here: https://theme.co/apex/forum/t/flipping-cards-are-not-the-same-height/6737/10

(See the Aug 28 reply by RueNel). This works for the browser zoom function and different screen sizes. Just make sure you refresh the page.

Thanks a lot everyone!

Jake

#12

Hey Jake,

You’re welcome. We are just glad that you have found the thread to resolve your issue.
We appreciate for letting us know!

Happy Holidays.

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.