Header positioning, padding, breakpoints, grid headings

Now (for mobile view) the image is:
- on the top of the website, just in the browser view (good);
- horizontally centered and responsive (good);
- vertically not centered and nonresponsive (not good);

Hmm not sure how it could be on the top of the website and vertically centered?

Background images aren't responsive by nature so there isn't much we can do about that.

Are you able to provide an example of the effect you are trying to achieve?

My goal is to achieve something similar to this: full page and to be able to overlay this with text, possibly also with semi-transparent box.
I will work on this today and report.

I have solved the image issue.
Right now I'm back to the page header next issue. While resizing browser window the text stays adjusts as it should and stays on the bottom of the browsing window - fine! But on my Kindle 7' the page header text along with its container (dark overlay) gets lower than the browser window...

Hmm I'm not sure if there is a way to fix issues on Kindle - they aren't meant for browsing websites.

Will ask Tom to confirm.

You think it might be because of the device? I don't think so :( After deleting padding (which should provide only additional space - at least I think so) the same happens on other mobile (and perhaps tablet) devices as well. Have a look now.

The example you linked is super easy to create with our page header add-on.

The difficult part is that you want the image to extend to the content part as well which is something the example site isn't doing.

If you are ok with only using image for the header/hero image part then we can definitely accomplish it a lot easier.

I also don't think height: 100%; will work.

I'm quite happy with how the image displays right now. By extending, do you mean making it fixed?

I am more worried about how the page header text is displayed. Once again, I would like it displayed on the bottom of the browser view... I am he image. They do not seem to be connected in the CSS.

In the worst case, I can have the text centered vertically (instead of putting it on the bottom) - which works fine.

Currently I do see the text at the bottom of the browser on my iPhone 6s using Chrome.

Which platform are you noticing problems?

I see the problem on an updated Chrome browser (Huawei P8, Kindle 7 II gen., some newish Samsung mobile). The text is on the bottom like I want it, but it extends out of the browser window.

In IE (10+ at least) I don't know how to deal with lack of support for media queries. All across the devices mobile specific (no media queries), css is displayed. The page header is way to low and overflows next element (h3 title).

bump

Just to confirm, is the issue the text requiring you to scroll down a little to read it all? It's almost like the address bar is pushing down the full height element.

Yes. Exactly.

Also, any directions you can put me towards in terms of making my site Internet Explorer friendly. I looked all over the web but can't find a good solution for addressing media queries in IE10+.

Unfortunately I don't think there's a way around that, as the address bar contributes to the height of the area: https://stackoverflow.com/a/37113430/2391422

I'm not sure about media queries and IE10 unfortunately. You may need to ask that on stackoverflow.com.

Heh, thanks. I gave it quite a bit of thought and couldn't figure this (first) issue out. Thinking of this now, if the address bar contributes to the height, how come I was able to create a background image that is of a correct size? I might try one more experiment...