vb.org Archive - How-To: Fix header image on phones & ipad *Help pls*

vb.org Archive (https://vborg.vbsupport.ru/index.php)

- vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)

- - How-To: Fix header image on phones & ipad *Help pls* (https://vborg.vbsupport.ru/showthread.php?t=310240)

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

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/

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:

Code:

@media screen and (min-width: 1125px) {

     .logo-image {

background: transparent url(images/misc/bannergraphic_photoshop.png);

     }

}

Code:

@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.

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

In header template put:

HTML Code:

<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.

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.

Quote:

Originally Posted by cellarius (Post 2492081)

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

Quote:

Originally Posted by TheLastSuperman (Post 2491998)

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:

Code:

@media screen and (min-width: 1125px) {

     .logo-image {

background: transparent url(images/misc/bannergraphic_photoshop.png);

     }

}

Code:

@media screen and (max-width: 1124px) {

     .logo-image {

background: transparent url(images/misc/bannergraphic_photoshop_small.png);

     }

}

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

X vBulletin 3.8.12 by vBS Debug Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (1)bbcode_html_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (6)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages:

Phrase Groups Available:

X vBulletin 3.8.12 by vBS Debug Information
Page Generation 0.01296 seconds Memory Usage 1,738KB Queries Executed 10 (?)
More Information
Template Usage: (1)ad_footer_end (1)ad_footer_start (1)ad_header_end (1)ad_header_logo (1)ad_navbar_below (4)bbcode_code_printable (1)bbcode_html_printable (2)bbcode_quote_printable (1)footer (1)gobutton (1)header (1)headinclude (6)option (1)post_thanks_navbar_search (1)printthread (6)printthreadbit (1)spacer_close (1)spacer_open Phrase Groups Available: global postbit showthread	Included Files: ./printthread.php ./global.php ./includes/init.php ./includes/class_core.php ./includes/config.php ./includes/functions.php ./includes/class_hook.php ./includes/modsystem_functions.php ./includes/class_bbcode_alt.php ./includes/class_bbcode.php ./includes/functions_bigthree.php Hooks Called: init_startup init_startup_session_setup_start init_startup_session_setup_complete cache_permissions fetch_threadinfo_query fetch_threadinfo fetch_foruminfo style_fetch cache_templates global_start parse_templates global_setup_complete printthread_start bbcode_fetch_tags bbcode_create bbcode_parse_start bbcode_parse_complete_precache bbcode_parse_complete printthread_post printthread_complete
Messages: