Banner Image Flex with Forum Width

[swaywolf]

Is there a way to have the banner image adjust in size with the width of the forum? An example of why is the following:



It overlaps the sidebar on some resolutions. Is there a way for it to size with the resolution of the forum?

[Kami]

Sept 6, 2023 7:28:54 GMT -8 swaywolf said:

Is there a way to have the banner image adjust in size with the width of the forum? An example of why is the following:



It overlaps the sidebar on some resolutions. Is there a way for it to size with the resolution of the forum?

There is, but the issue would then be whether or not it's legible when changed to a size that fits without changing the aspect ratio (size of the font, any quality loss / blurriness).

Happy to provide some CSS to help however:

- Are the trade-offs (above) worth it? In other words, how many people use that resolution? Is it enough to offset the potential that the banner is no longer legible or is blurry?

- Since you've customised your forum quite a bit, we would need a URL to your forum to make sure the solution accommodates any changes made away from the PB default that would impact the outcome.

[swaywolf]

aelynrevival.proboards.com/

That's the URL to the forum. If you can provide the CSS for it, I can put it in and see if it's something we want to keep or not. I'm familiar with how some of it works, but making the codes myself is not my strong suit.

I appreciate your time!

[Kami]

Sept 6, 2023 16:05:39 GMT -8 swaywolf said:

aelynrevival.proboards.com/

That's the URL to the forum. If you can provide the CSS for it, I can put it in and see if it's something we want to keep or not. I'm familiar with how some of it works, but making the codes myself is not my strong suit.

I appreciate your time!

Sorry for the delay!

OK, having a look you have two options here:

a) have the banner adjust for the width of the browser up until the actual physical width of the banner (925px)
OR
b) have the banner adjust for the width of the browser even if it exceeds the original width of the image. Exceeding the original size of the image will make the image a bit blurry, but you may not find that a problem (it's pretty legible on my ultrawide for what it's worth).

Either way, pop either of these into your stylesheet for this theme. I'd recommend the bottom, usually, but remember that stylesheets are cascading so if you have any other CSS that alters the banner space after this in the future, it may overwrite or negatively impact this particular change.


/ * === Adjust Banner Width (Max. 925px) === */
a#logo img {
   width: 100%;
   max-width: 950px;
}


OR (do NOT use both!)


/ * === Adjust Banner Width (No Max) === */
a#logo img {
   width: 100%;
}


Let me know how you get on -- I may need to adjust this to include one of the parent containers but I think this should be sufficient.

[swaywolf]

I keep getting the error at the bottom no matter where I put it on the Style Sheet for that theme. What am I doing wrong?

[Kitty Katt]

Sept 8, 2023 19:08:45 GMT -8 swaywolf said:

I keep getting the error at the bottom no matter where I put it on the Style Sheet for that theme. What am I doing wrong?

You cannot have a space between the / and * on line 49 - they must be together: /*

My guess is that Kami accidentally hit the spacebar when she was typing in the code.

Edit: I would, however, take her advice and move that code to the bottom of your stylesheet.

Edit #2: Here is Kami's first code (since that appears to be the one you are using) with the minor correction:


/* === Adjust Banner Width (Max. 925px) === */
a#logo img {
  width: 100%;
  max-width: 950px;
}


[Kami]

Ah, my bad! Yes, accidental space. Thanks so much for helping out here, Kitty!

[Kitty Katt]

swaywolf,

Is this issue resolved for you, or are you still requiring assistance? Please let us know either way. Thank you.

[swaywolf]

It is resolved, thank you!