Responsive Height of Intro

Hey,

I'm wondering if there is any chance to make the intro area's height responsive!?
As I can see, the height is fix. I want to insert an image getting smaller (width / height) with the Resolution and get rid of the unused space below the image.

http://screencast.com/t/DRQeJjV3

Thanks again
Tom

The intro area is 100% height as default. Check on our demo theme - if page is on top (no scrol down), then You can change browser width and height, and intro stays covering entire browser area.
Could You post an url to your site - Ill try to check whats wrong.

You are trying to use there 3rd party plugin (nivoSlider), and we dont support 3rd party extensions, so perhaps You should try to ask plugins support team?

The module type does not effect the non responsive height of the intro area.
Even if I use the Default "Image Show GK4" the height would not be responsive.
I changed it for testing purposes.

What browser are You testing with?
I have checked Chrome and Safari and image behaves exactly as it should.

Testing with Internet Explorer 10, Firefox 21 and Opera 12, Windows 7

All the same.
Strange... Could you provide me a screenshot of your screen?

Perhaps we should firstly describe how responsive image should look like...
With responsive sites, mainly there are just 2 possibilities... Because oryginal photos are mostly 4:3 aspect ratio, and browsers width:height aspec ration may be just any, then displayed image can behave 2 ways:
1. It is middle centered in screen, and is cut off on sides or top and bottom if browser's aspect ration doesnt fit 4:3 (or5:4 or any other). Aspect ratio of image is always correct
2. Image is set to fit on screen with aspect ratio is set to correct. Image always fits browser width, but if height of browser is larger than image's - background shows from its under.

Now with our solution, image is centered, and with nivoSlider, image has set width to 100% (so orange background was showing beneath it).

Now, with our way of showing image:
1. browser aspect = picture aspect:
http://d.pr/i/20oU
2. browser's height to small:
http://d.pr/i/ML4c
3. browser's width to small:
http://d.pr/i/Q2Wd

Okay, that's what it look like in my Browser, too.
And you're right, this is one posibility to make it responsive.

For me, it's important that clients see the entire Image or at least most parts of it.
So, is there any way to keep the picture in it's correct aspect ratio without cutting off the left or right side?

I just want the intro position to be more flexible.

Sadly no - if You need to fit entire image on screen - You have a "bar" of background on bottom if browser height to width is larger than image height to width. Sadly this is mathematic equation and cant be done any other way.

Unfortunately it makes sense

Anyway, thanks for your time and help!

No problem - what I might suggest - if with nivoSlider You could move photos so they center vertically, changing background to white and adding some left and right padding to images would make them look polaroid'ish... or even only adding top, left and right padding and leave bottom bigger. But thats just an idea how things could look visually better.

I will play a little bit to find a good looking solution.
Thanks

How do I change the width and height of intro picture?

By uploading picture with different aspect ratio.
Image is stretched to fill entire browser visible area.

So there's no way to avoid stretched images while to keep their aspect ratio?
Same width but half height as it now?

template.css line 103

div.gk-intro {
height: 91%; // <-------------- on Chrome changing on the inspector <div class="gk-intro">
position: relative;
}

Is it safe or makin it create some mess around?


Thanks.

I changed it to "Auto". Fixed

template.css line 103

div.gk-intro {
height: 91%; // <-------------- on Chrome changing on the inspector <div class="gk-intro">
position: relative;
}

Is it safe or makin it create some mess around?


Thanks.

Sorry,,this is not working..