Responsive image placement in header

installed quickstart for ecommerce version of quark on 12/13
website: http://www.ahgoobaby.com/Redesign2

For the header we replaced the demo gradient with a flat white background (1600x700 jpg). We replaced the shoe png image with a new png image of a baby peeking through a torn piece of paper. The tear effect has shading that fades to white on outer edges which when layered over the white background provides a continuous page effect. The png baby image as tightly cropped as I can get it is 700x550.

A) For desktop, tablet (portrait + landscape), and iphone/mobile (landscape only), I would like the baby image to appear centered vertically and to the right of the text. Generally it is working as I wish now, but the image is too small and I would like the perspective to be larger. I don't have a higher resolution of the baby png file, but feel it should still be able to appear larger than it does. What settings can I change to get the image to look larger than it does? I'm thinking either reducing the background image file and/or there might be a setting for how far in or out the module may crop the background image size? Let me know based on the above image specs if there is an ideal combination for me.

For iphone/mobile phone PORTRAIT only, I want the header text / browse button on top and the baby image under the text with the same flat white background color. I'd like the baby image to be resized to ideally cover the maximum portrait width. So the text / browse button above in the current size portrait mode with the baby png image under the text zoomed to the full portrait width of the screen. Let me know based on the above how to make that appear as desired.

C) any white /module space under the text and baby image should be cropped to not have wasted space down the page. How / where do i adjust the height of the module to the ideal / most efficient height? Please provide how to do this BOTH for A) responsive screens for all except portrait mobile phone mode and for responsive screen in portrait mobile phone mode

A)
Size of the image is defined by using max-height media query:

Code: Select all

@media (min-height: 1420px) {
  #gkHeaderMod .gkStoreImage > img {
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
@media (max-height: 1040px) {
  #gkHeaderMod .gkStoreImage > img {
    height: auto !important;
    width: 70% !important;
  }
}
@media (max-height: 950px) {
  #gkHeaderMod .gkStoreImage > img {
    height: auto !important;
    width: 60% !important;
  }
}
@media (max-height: 800px) {
  #gkHeaderMod .gkStoreImage > img {
    width: 50% !important;
  }
}
@media (max-height: 700px) {
  #gkHeaderMod .gkStoreImage > img {
    height: auto !important;
    width: 40% !important;
    max-width: 40% !important;
  }
}


You can try to use this code in override.css to change its width/height - jus by modifying % values.

C)
The spacing you see is there because header is designed to fit entire page height. To disable it you need to edit this file:
templates/gk_quark/js/gk.ecommerce.js
and mofigy this lines:

Code: Select all

   // 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");
      }   
   });


I made the change you recommended for A & B by overriding css using the code you supplied but there appears to be no effect. I'm not overly experienced in what this all means so I am just putting what you recommend into override css (making sure override css is turned on in template). Do i need to be changing the %'s?

I just want to get the baby image (which I used to replace the demo site's shoe image) to be larger than shown. It appears it is scaling it smaller for some reason. And for portrait small screen only I want it to appear under the text and browse button. Can you help me understand what parts of your code provide solutions to each of the above? That way I know what code elements I need to adjust to provide the desired result.

Yes, you need to work with % values and adjust them to your liking.

Yes, but can you clarify for me what responsive screen type relates to each % in your code?

Specifically, with regard to the PORTRAIT mobile phone screen, the baby image (similar to the shoe image in the demo), it needs to not only be larger but also needs to appear in layout UNDER the text and browse button. Can you specify what each % does so that I can know which section and which % does what?

In addition to the above post still pending, please also see storefront version of this image in ImageShow GK4 where the same image dimensions are able to appear much larger:

www.ahgoobaby.com/Redesign

I'd like the image to appear this size in all screens and then maximum screen width in portrait mobile phone mode under the text and browse store button.

Thanks.

Different templates are designed in different way. If it goes to height of devices - you need to play with values, they are self explanatory so you should be able to figure something out.

but on the mobile phone portrait mode I cannot see the image at all. It should at least appear in the portrait mode if your above code puts the baby image in the middle of the screen under the text. Maybe too small I increase the %, too big I reduce the %, but I don't see the baby at all in portrait mode. It is almost as if it is right aligned to the text so it appears off screen. When I go to landscape mobile phone mode, I see the image fine.

This is exactly how it behaves on our demo server - on smallest screens the shoe disappears. If you want any other behave you need to design and implement it on your own, I cannot help here as this kind of customisation is beyond our technical support.

I had an idea but not sure if a) it can work for the above problem, and b) how to execute it.

Is it possible to set up the grid gk5 with a 2-box grid (top left and top right) and set gride gk5 to the header position? Then duplicate the original custom html header module (2 copies of them) where copy 1 is just the html code for the title text and browse store button (set to box 1 module position) and copy 2 is just the html code for the shoe image (set to box 2 module position). Set the size of the modules such that on desktop and tablet it appears with box 1 to left and box 2 to right (just like demo), but on mobile screen sized so that box 1 is on top and box 2 is on bottom?

You can try and see what it is going to give you. The only problem I see is you might get different result than current one (from graphical point of view).

I'm only able to get the size of the 1040 px to impact the size of the baby image for desktop mode:
@media (max-height: 1040px) {
#gkHeaderMod .gkStoreImage > img {
height: auto !important;
width: 200% !important;
}

I tried using all of the other combinations you recommended above but they have no impact on the size of the shoe image (my baby peeking through the torn paper image) when in tablet mode or mobile landscape mode. see: www.ahgoobaby.com/Redesign3

I need to fine tune the size of this image in a) tablet portrait mode, b) tablet landscape mode, and c) mobile landscape mode.

How / where do I do that?

Still waiting on a reply here. Specifically, using your code, I am unable to get ANY of the responsive images to change size except the desktop resolution. Something has to be missing. Please help.