the background header scaling on iphone and ipad is not correct and zooms into the background image way to much. on the header of this homepage on ipad you only see the water tower and immediate area. Problem is even worse on iphone. Android phone seems to scale correctly.

historic25.com

I just wanted to add that I'm in a bad place with this website with my client ( a board ). They're looking on the website from ipad, iphone, android and windows phone and all of the devices have issues with the scaling of the background, the placement and size of the logo and the position of the menu icon on mobile. I've tried a bunch of things and can't make them happy.

Please help!!!

Hi,

There is a module in the banner position which makes the banner taller, but it has the class hidden-phone so it is removed at mobile widths.
If you remove that suffix then the banner will be taller.

At phone width I see all black in the banner position but if I remove the contents of the custom.css file then then banner becomes visible again. Try removing each rule in developer tools to see what's causing it.

The menu toggle is covered by the floated logo on mobiles.
As the menu turns to a toggle, you could wrap the css that floats it to the right in a media query so it only affects desktops. Then when the menu collapses it would move back to the left and the toggle would be clear.

Regards,

Rob

thanks for your reply Rob.

I've removed the blackout on mobile.

the biggest problem I'm having is the background image scaling on ipad and iphone. When I look at the ipad the background image is zoomed way in, it is blurry too.

I put the spacer in there to show more of the background banner, but I don't think that is affecting the scaling.

Any more help in getting this right for ipads and iphone would be awesome.

Hi B,

Sorry for the stress

Can you create a ticket and Ill add a fix for this. Basically ios doesnt handle background attachment like this. I'm not sure why this didnt show up when we released it but perhaps its a new issue. I dont recall seeing it way back then.

Anthony

can you tell me how to give the background a little more height on mobile devices.

right now it is not tall enough and cuts the photo a bit.

thanks

Try targetting

#topcolour and the padding-bottom: 20px;

with a media query

Cheers
Paul

thanks Paul, I'm getting closer here. Sorry for so many questions but i find it difficult to check the mobile using firebug. For example, if I scale my browser down to mobile width I don't see the same thing as on my phone.

One last item, on mobile the logo is very small, where is the scaling of the logo controlled if I want it bigger. Thanks

Think you need to look at something like

@media (max-width: 787px) and (min-width: 320px) {
#navouter .noresize .span2 {
width: ?????? !important;}
}

with you adding the width value as required and perhaps narrowing the media query if needed