Help needed with mobile responsive header

[rolfcarol]

I am using Artisteer for templating for my joomla sites. I have a site where the header is fine on a computer and on mobile devices when in landscape mode. when a mobile device goes to portrait mode the image in the header is preceded by 'white space' at the top. the site is http://www.thechildrenstheatre.org/. the template zip folder is too large to attach but can be downloaded at : http://www.thechildrenstheatre.org/a_23.zip any assistance will be appreciated. also changing line 823 in template.css from 550px to auto results in the image and menu from disapearing off the screen. I have been working on this for weeks and am at my wits end. Please help.

[gws]

Unfortunately Artisteer templates are known to cause problems, if possible change your template.

[rolfcarol]

Thank you for your reply. Since my skills are not up to snuff yet, any suggestions as to packages that help with templating?

[gws]

As your site is quite a simple one you could easily recreate it using the joomla default template protostar. You could install akeeba backup on your live site make a backup and download it to your computer, install Xamp or similar and develop your new site locally on your computer and when satisfied upload it to your web domain.

[d0ugal]

Hi rolfcarol
It looks like your header image 'withname_s.png' is inside a div with class="custom", which in turn is inside your header with class="art-header"- but only at larger sizes. When one gets down to mobile size the div with class="custom" is now below, or outside the header with class="art-header". That space at the top IS the header, and you need to put your custom div back inside it... I don't use artisteer so I can't fix it for you, but hopefully this points you in the right direction?