0

I have this site:

www.daviquigley.co.uk

that I've built and which works fine on desktops and seems to work okay cross-browser. I haven't included media queries for smartphone display as I haven't looked into these yet. The iphone seems to resize all pages (except the homepage) okay. However, a few people have commented that on the iphone the 'Piano Classics' thumbnail covers the face on the main photo because this fullscreen image isn't resizing properly. Could anyone help me with a quick fix for this? I wasn't sure if media queries would fix it?

Thanks Antony

Antony Antoniou
  • 31
  • 1
  • 10

1 Answers1

0

on the iphone the 'Piano Classics' thumbnail covers the face on the main photo

That happens for me on the desktop, too. The 'Piano Classics' image doesn't have the ideal positioning context. Where would you really like it to sit on the screen?

ralph.m
  • 13,468
  • 3
  • 23
  • 30
  • I guess I kind of like the position it occupies now - ie: it moves along with the main pic as it resizes to it always sits to the right of the shoulder and about at the same level. Is that possible? – Antony Antoniou Apr 28 '13 at 10:30
  • Just realised the whole thing looks dreadful in Opera but that's a separate issue :-\ – Antony Antoniou Apr 28 '13 at 10:34
  • Ralph - I've taken some screen shots of how it currently looks to me on the desktop (Safari and Firefox on Mac OSX imac). These are the ideal positionings for me in terms of layout. www.davidquigley.co.uk/shot1.jpg and www.davidquigley.co.uk/shot2.jpg – Antony Antoniou Apr 28 '13 at 10:50
  • It will only sit over the right shoulder on short, wide viewports. I opened it in Chrome (which I have set to fairly narrow on a tall screen) and got the same effect as on the iphone in portrait view. In this situation, it may be better to rethink the `background-size: cover` option, since using that will give you very little control in positioning elements in relation to the background image. – ralph.m Apr 28 '13 at 10:50
  • Okay. Would I be better putting the image inside a div of it's own and adding some media queries - perhaps calling up different sizes as necessary? I'm just pulling things out the air here - I've little idea about how to actually make it happen. – Antony Antoniou Apr 28 '13 at 10:54
  • This may not be amenable to you, but I think something like this would be better: body { background: #111 url('images/bg3.jpg') no-repeat 50% 0; } #sitewrapper { min-width: 960px; } #homepage_content { position: relative; min-height: 300px; margin: 250px auto 0; } #column3 { position: absolute; float: none; right: 0; } – ralph.m Apr 28 '13 at 13:18
  • Hi Ralph - Thanks again. I'll give that a shot. Cheers Antony – Antony Antoniou Apr 28 '13 at 18:11