Quark e-commerce header height

12/3 quickinstall of quark ecommerce
www.ahgoobaby.com/Redesign3
Based on a prior forum post, I am able to successfully undo the full page header default (thereby removing the excess white space between modules) with templates/gk_quark/js/gk.ecommerce.js and modify this text:
// Calling functions for the resize
$(document).ready(function() {
gk_quark_footer_resize();
//gk_quark_header_resize();
});

$(window).on('load resize', function() {
gk_quark_footer_resize();
//gk_quark_header_resize();

if($('#gkBg').outerHeight() < $(window).outerHeight()) {
$('#gkBg').css('min-height', $(window).outerHeight() + "px");
}
});

All looks good except the mobile portrait screen which ends right at the bottom of the browse now button. Since there is no image on that view, the height ends at the bottom of the browse now button and implementing this fix makes it look very unbalanced in this mobile portrait view. Is there a way ON JUST THE MOBILE PORTRAIT view to manually set the height of that module so that I can add white space under it to make it look more balanced?

Hi

I'm afraid I will need a better explanation. Can You show me a screen from mobile of an element You have in mind and a description how should it looks like ?

See samp-unnamed.png screen shot of the mobile phone portrait mode I have been able to get to work. This is how I would like to get the mobile tablet portrait mode to look, but that mode currently looks like screen shot samp-unnamed2.png. Can you let me know what file would have the code to adjust the image to allow it to drop under the "browse now" button so that it appears larger proportionate to that screen perspective (similar to the way it now does in the mobile phone portrait mode). If you cannot help me with coding recommendations, can you at least direct me to the correct file and location to work from?

Hi

Ok. Lets try this code than:

Code: Select all

@media only screen and (max-width:840px) {
.gkStoreHeader {
    float: left;
    width: 49% !important;
}

.gkStoreImage {
    float: left;
    margin-left: 10% !important;
    margin-top: -5%;
    width: 25% !important;
}

.frontpage #gkHeaderMod {
    min-height: 0 !important;
}
}