How-To: Fix header image on phones & ipad *Help pls*

[afmarko99]

All,

I have my forum setup perfectly for the PC with maxwidth at 1125 and auto margins. However, when I visit the forums on my phone or my ipad the banner extends beyond the width of the forum.

Please see this link for the reference image.

Forum of reference: http://forum.withwingslikeeagles.net/

[TheLastSuperman]

That's because the header image if HUUUUUUUUGE @ 1125px x 233px.

I would take a hint from "responsive" web design and use @ media screen css example:

@media screen and (min-width: 1125px) {
     .logo-image {
background: transparent url(images/misc/bannergraphic_photoshop.png);
     }
}

@media screen and (max-width: 1124px) {
     .logo-image {
background: transparent url(images/misc/bannergraphic_photoshop_small.png);
     }
}

Try that in additional.css but change the bannergraphic_photoshop_small to your image smaller logo image needs to be a smaller shrunk down version of your logo i.e. less text etc perhaps just icon/logo only so that way when it resizes your logo is not larger than the content.

I'm actually working on a responsive style now and its giving me some issues on subsequent pages but that should work let me know if not.

[Max Taxable]

I did this, for mobile but works great for regular styles as well. Single image, scaling header:

In header template put:

<a name="top"></a>
<td valign="top" style="padding: 0pt;"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<td align="center"><a href="./"><img class="imageObject" alt="Your Forum Name" src="http://yoursite.com/images/misc/yourbannerimage.jpg" width="100%" height="100%" border="0" align="center" /></TD></table>

Then in extra CSS attributes, define the img class for IE compliance: (This is a MUST.)

.imageObject {
max-width: 100%;
}

This insures the single header image will scale both in width and height and keep perspective.

Examples where I have implemented this:

MLB Fan Forum - Powered by Baseball Fans

The Dallas Cowboys Forums - Dallas Cowboys Fan Forum Mobile Style

US Messageboards - Opinion, News and Information

You can see the header image on those sites adjusts to your browser width. As you make it skinny, or wide, it moves like a 3 piece header would but it is just one image that scales. (However this is impossible to accomplish for chrome and safari, they ignore the 'max-width' definition.)

BEST RESULTS: Make your banner image at least twice as wide as the widest mobile resolution you would encounter (maybe 700px wide by whatever the height is) so that you are always only scaling down, not up. For better quality.

[cellarius]

But you realize that using tables for layout purposes is not what tables are meant for, and it's not good practice to do that? This has been done 10 years ago, but Webdesign has moved on since then...

Also, your syntax is completely messed up: td - table - td - /td - /table, where it should be table - tr - td - /td - /tr - /table.

And what exactly do you need the table for at all? Setting the img-width to 100% will achieve exactly the same.

[Max Taxable]

Originally Posted by cellarius

But you realize that using tables for layout purposes is not what tables are meant for, and it's not good practice to do that? This has been done 10 years ago, but Webdesign has moved on since then...

Also, your syntax is completely messed up: td - table - td - /td - /table, where it should be table - tr - td - /td - /tr - /table.

And what exactly do you need the table for at all? Setting the img-width to 100% will achieve exactly the same.

Might be exactly why sometimes IE blows the image way up!

[afmarko99]

Originally Posted by TheLastSuperman

That's because the header image if HUUUUUUUUGE @ 1125px x 233px.

I would take a hint from "responsive" web design and use @ media screen css example:

@media screen and (min-width: 1125px) {
     .logo-image {
background: transparent url(images/misc/bannergraphic_photoshop.png);
     }
}

@media screen and (max-width: 1124px) {
     .logo-image {
background: transparent url(images/misc/bannergraphic_photoshop_small.png);
     }
}

Try that in additional.css but change the bannergraphic_photoshop_small to your image smaller logo image needs to be a smaller shrunk down version of your logo i.e. less text etc perhaps just icon/logo only so that way when it resizes your logo is not larger than the content.

I'm actually working on a responsive style now and its giving me some issues on subsequent pages but that should work let me know if not.

So basically I need to create a smaller image for it to pull on mobile and then add both of those codes into additional.css?

Thanks