Adding Text to header question

[Lynne]

It looks like Seven Skins was correct.

[Hawk7173]

It worked. In fact, for some reason in the additional .css template, it had float no. After the change it fixed the images problem. I'd like to replace the images with text so it is faster loading and doesn't take as much space in the header.

I'm assuming that I can just use the html for the text in the ad spots in place of the images.

[Hawk7173]

I looked at my forum on a 10" tablet and the header is all messed up like before. How do I float the entire header or forum width so that no matter what size screen the forum shows as it should?

[Skyrider]

You could try checking out:

http://www.vbulletin.com/forum/forum...er-size-issues

Altering the style to fluid rather than fixed makes it stretchable based on browser window size. I have no experience with this as I barely touch these fixed/fluid options. Not sure if it is the answer for you but you could give it a try.

I do believe that the:

doc_MaxWidth and doc_Width under Styles & Templates -> Style Manager -> "YOUR STYLE" -> Style Variable Editor should be set to auto for fluid.

[Seven Skins]

You need use "max-width: 100%" for your header images and they will get resized on smaller screen.

[Hawk7173]

Thanks for the replies.

Originally Posted by Seven Skins

You need use "max-width: 100%" for your header images and they will get resized on smaller screen.

Is this in additional .css or in stylevars?

If in additional .css what would the code be?

[Seven Skins]

Add this to additional.css

.logo-image, .ad_global_header1 img {
  Max-width: 100% !important;
  height: auto !important;
}

[Hawk7173]

I've added that to all styles. In testing it on my cell phone, it doesn't change anything. the images are still stacked vertically.

Tested in going from mobile style to full site.

--------------- Added [DATE]1437687460[/DATE] at [TIME]1437687460[/TIME] ---------------

I saw you posted the below code for someone with a similar problem, but I don't know if any of it would help in my situation.

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* STYLES GO HERE */
}

[notrious]

If you aren't much into coding just make a new banner with fixed width logo on right side and text on left ...

[Hawk7173]

I can make a single image to cover the entire header width, but that I fear won't be cell phone friendly. I've been looking into how to make the entire forum width to 100% or fluid whichever is better, but am not having very good luck with search results.

--------------- Added [DATE]1437696064[/DATE] at [TIME]1437696064[/TIME] ---------------

I've created a single image containing everything I wanted in the header. It solved the initial problem, but created another in that now the mobile style doesn't act accordingly. Looks ok when my 4g phone is vertical, but when I turn it horizontal to widen the screen, it has a large blank space to the left of everything except for the mobile logo

--------------- Added [DATE]1437697036[/DATE] at [TIME]1437697036[/TIME] ---------------

Below is what I have in .css

.logo-image { float: left !important; }

.logo-image, .ad_global_header1 img {
  Max-width: 100% !important;
  height: auto !important;
}

body {
  margin: 0 auto;
  max-width: 100%;
  min-width: 100%;
  width: auto;
}