header problem

[mp3president]

Hi there,

I have a problem with my custom header.
The problem is that is not auto scaling to different sizes.
Managed to get it work on the PC, however when i check on mobile it wil not automatically ajust to the screen.

Can any one help me???

The link : www.rlx4u.com

Thx in advance

[ForceHSS]

You don't have the banner on the mobile style

[mp3president]

Oke, have to ajust that, thx.

However, on different resolutions it will not ajust automatically either.
So how do i make it ajust automatically to people with another resolution.

Thx

[Seven Skins]

add this to the style of the logo..

width: 100%; max-width: 100%;

And remove this from header id.

height: 150px

[mp3president]

add this to the style of the logo..

width: 100%; max-width: 100%;

And remove this from header id.

height: 150px

Removed the height, and added the width in the header template:

<div id="header" class="floatcontainer doc_header" style="overflow: hidden; width: 100%; max-width: 100%;">
<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image"><img src="http://www.rlx4u.com/forum/images/Seamus/misc/rlx4u.png" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div><vb:else /><div>&nbsp;</div></vb:if>

But still isn't working.
Kan someone tell me what i am doing wrong???

Thx

[Seven Skins]

Code I posted has to be applied to the logo image. Not to the div.

.logo-image {width: 100%; max-width: 100%;}

[mp3president]

Ok, i probably look stupid (this is all new for me), but do you mean likt this??

<div id="header" class="floatcontainer doc_header" style="overflow: hidden; width: 100%;">
<vb:if condition="$stylevar['titleimage']"><div><a name="top" href="{vb:link forumhome}" class="logo-image {width: 100%; max-width: 100%;}"><img src="http://www.rlx4u.com/forum/images/Seamus/misc/rlx4u.png" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div><vb:else /><div>&nbsp;</div></vb:if>

I have looked for other "logo" templates but couldn't find anything.
So i guess this one is the one. However i can't get it to work.

Thanks for your help and hopefully your patience.

[MarkFL]

What Seven Skins has given you is a CSS class selector, which means it can be added to your "additional.css" template. It will then affect any HTML element with the class "logo-image." :)

[mp3president]

Ok, now i have seen it i should have known there it has to be changed. I am Stupid hahaha.

However,
There is nothing in the additional.css regarding the logo, only the header.
Do i have to put it over there????

Or do i have to make an custum logo part????

Thx

[MarkFL]

You can simply add the code Seven Skins provided to the end of the template.

[mp3president]

Oke, done that.

However, when i look on my ipad the full site it will not resize.
The board and everyting else is just fine, but the header still isn't right.

[MarkFL]

Okay, you need to apply the CSS to the image itself, so edit the selector you added to read:

.logo-image img {width: 100%; max-width: 100%;}

[mp3president]

Yesssss, that's it!!!!!

Thank you Sevenskins and MarkFL so much!!!!
You both have helped me a lot!!!
And i have learned something again!!!!

Much appreciated, and sorry for my bad English.

Regards

[CAG CheechDogg]

Ah yes ... always good to see people happy with the help given here at vorg...