My usage of jQuery is quite basic to ensure that elements are properly positioned when they are moved:
function ipad() {
var width = jQuery(window).width();
if (width < 1200 && width >= 768){ //if tablet
jQuery('.mobbut').css('width', '33.333%');
jQuery('#re2').css('max-width', '');
} else {
jQuery('.mobbut').css('width', '100%');
jQuery('#re2').css('max-width', '400px');
}
if (width < 768){ //if mobile phone
jQuery('._btnselect').hide();
} else {
jQuery('._btnselect').show();
}
}
jQuery(document).ready(function() {
ipad();//run when page first loads
});
jQuery(window).resize(function() {
ipad();//run on every window resize
});
jQuery(window).load(function() {
ipad();//run when page is fully loaded
});
I have successfully tested my website in Chrome, Safari, iPad, and iPhone, but the layout messes up on Firefox when the window is resized smaller than 1200px wide. You can see for yourself here's the webpage. Could this issue be related to the jQuery code or is it more about how the page was originally designed? The homepage was inherited from another designer and previously used tables, which might be causing problems specifically with Firefox.