Banner Not Resizing

[Exxie]

Hey I've been having trouble with the banner on the site I help staff.  Some people get to see the banner in its full glory:



Myself and some others meanwhile get to see this as desktop version. I'm on a laptop, and another person sees it worse on an iPad.



I'm hoping there's a solution to this, I don't know whether it's theme or coding or what. I'm assuming it's probably an issue where the theme doesn't resize the banner, but I don't know enough about coding to know that for sure.

[hdd]

This might help:

#banner {
/* Change value accordingly to you */
height:200px;
}
OR
If you want to resize the banner image then do this:

<h2 id="banner" style="background-image: url("http://i.imgur.com/JeehZNo.png"); background-size:1000px 200px;">
<a id="logo" href="/"></a>
</h2>


[A.]

Hi! I am another staff member on the site in the first post (I work alongside Exxie), and I was wondering if we should replace banner coding with either of the codes you listed above or if those codes work as an edition to what's already in the theme's code? (I apologize if I didn't word that all that well.)

Sincerely,
Anna

[Beckea]

1)  What is the code you are using? Maybe post it.

The codes above could but I would think you would need to provide additional information because who knows what code you have in there and how much of it is coded (heavily) something may be overriding the code you posted. You never know.

The top code #banner you can put in your stylesheet and would work with more added to it. what is the size of your banner?

For more information, we would need this below information:

2)  Link to your forum.
3)  Theme you are using -- is it your own? did you find it in the PB theme gallery? Or did you have someone create it for you *(if so they would be the one to go to)? Some themes are so involved with code that some areas may be "fixed" to a certain width or height. Or it is overriding the additional code you may have put in your stylesheet.

See below post about my test of your image on my test forum. It worked.

[Beckea]

Okay.

I posted up your image that Exxie gave in the OP -- and I have the width at 86% and the height at 525px (banner). It works and responded to anything I gave.

Now I did look from my ipad as well and it is cut off -- I hate using my iPad when visiting forums. So I never do. 

[KingJ]

Hey there!

I’m another staff member from the aforementioned site (Rise for All , an original superhero RP site), and I thought I’d provide some more information to maybe help things out.

First off I have linked to our site above.
We are using a somewhat modified version of the City Lights theme, linked there for ya. It’s real nice when you look at it on the right laptop, but the banner does get cut off if you don’t set your browser zoom settings just right.

I don’t know exactly how it’s been modified, that’s more Anna’s realm of... 

She’s gonna give me crap either way so I’ll say “experience” as opposed to expertise.

On my iPad, what aggravates things even more is that the actual forums are crushed. I suspect it has something to do with the sidebar on the left not resizing either. Could this be why both the banner gets cut off and the forums themselves get smooshed on anything with the wrong screen width? I noticed it’s size is pretty consistent no matter where I check it out on.

As one final note of something that’s perturbing on iPad, the “Switch to mobile” link is hidden by the bottom navigation bar, which keeps me from using my iPad to work on the site at all. It’s a little outside the realm of the original question, but since we’re expressing the problems we’re having with this theme and our site, I figured I’d mention it.

I hope this additional information helps!

[Exxie]

So you asked us to post the code.  What part of the code are you wanting us to post?  We're using a version of a theme called City Lights.  I changed the colours, and the graphics of course were changed but other than that I believe it's the original theme.

[Beckea]

The size of your image is 1379x523 - wow --- I think the image will have to be resized.

I never use my iPad for accessing PB (my forums). It never looks right and always something looks screwed up or squished.

[Retread]

Jan 12, 2020 23:11:38 GMT -8 KingJ said:

Hey there!

I’m another staff member from the aforementioned site (Rise for All , an original superhero RP site), and I thought I’d provide some more information to maybe help things out.

First off I have linked to our site above.
We are using a somewhat modified version of the City Lights theme, linked there for ya. It’s real nice when you look at it on the right laptop, but the banner does get cut off if you don’t set your browser zoom settings just right.

I don’t know exactly how it’s been modified, that’s more Anna’s realm of... 

She’s gonna give me crap either way so I’ll say “experience” as opposed to expertise.

On my iPad, what aggravates things even more is that the actual forums are crushed. I suspect it has something to do with the sidebar on the left not resizing either. Could this be why both the banner gets cut off and the forums themselves get smooshed on anything with the wrong screen width? I noticed it’s size is pretty consistent no matter where I check it out on.

As one final note of something that’s perturbing on iPad, the “Switch to mobile” link is hidden by the bottom navigation bar, which keeps me from using my iPad to work on the site at all. It’s a little outside the realm of the original question, but since we’re expressing the problems we’re having with this theme and our site, I figured I’d mention it.

I hope this additional information helps!

The issues with the banner image and the forum content being 'smooshed' are somewhat related.

Even without the left sidebar, you'll always have some level of problems going from wide screens to narrow screens but the sidebar exacerbates that. It isn't just because this sidebar has a fixed width. But a fixed width sidebar does make a bad problem even worse..

Regarding this, and the other item you mentioned (the bottom Nav bar blocking the link), you should probably contact the author of the theme.

---

Having the banner image in the right panel means it also sees severe changes in the amount of width it's allotted. If the sidebar was in the content section of the forum (below the top ad) rather than starting at the beginning of forum wrapper, the change in width wouldn't be nearly as severe.

But the good news is, I have a fix for the banner image. And it should be rather easy. Just add this to the bottom of your Style Sheet for that theme:

/* Fit banner container to image aspect ratio, regardless of viewport width  */
#banner{
   height:auto;
   background-size:cover;
   padding-top:35.2%;
}
If you change the image you're using in your banner, you'll need to change the 35.2% accordingly.

This is how the forum looks using my iPad emulator:

SPOILER: Click to show

This is how it should look after the Style Sheet addition:

SPOILER: Click to show

[Beckea]

Retread was quick to respond. Thanks.  

How the creator coded the nav - you would have to check with that person for the nav-menu for any fixes they may have.

[A.]

Thank you both for your help! We really appreciate it! We'll definitely see about getting in contact with the creator of the theme, as you've suggested.