Coding to adjust logo to fit different screens

[Shaliza]

Hello:

My forum URL:  allkindsofeverything.boards.net

I usually have my forum width set between 80%-90% so that it helps to accommodate the content on different size device screens. However, it does not affect the logo size on different screens and it is always cut off on my iPad and on smaller computer screens per my members. 

Is there any way I can make it so that the forum width percentage also applies to the logo width? 

Thank you so much in advance!  

[Nscalerr]

Hi Shaliza

Add the following to the bottom of the stylesheet for one theme

/* Change banner image to fit. */
#banner {
background-size: 100% 100%;
}

or in style tags in the Global Header for multiple themes.

<style>
/* Change banner image to fit. */
#banner {
background-size: 100% 100%;
}
</style>

[Retread]

Jun 28, 2020 20:59:37 GMT -8 Shaliza said:

Hello:

My forum URL:  allkindsofeverything.boards.net

I usually have my forum width set between 80%-90% so that it helps to accommodate the content on different size device screens. However, it does not affect the logo size on different screens and it is always cut off on my iPad and on smaller computer screens per my members. 

Is there any way I can make it so that the forum width percentage also applies to the logo width? 

Thank you so much in advance!  

Hi Shaliza

The fix Nscalerr suggested seems like it would work for a banner background image.

But in your forum, I think the issue is the Logo image.

Here are some ways to address that.

You could add this to the bottom of your Style Sheet:
/* Center Logo image and display fully on narrow viewports */
#banner{
   text-align:center;
}
#logo img {
   text-align:center;
max-width: 100%;
}

Or add this to your Global Header (or Global Footer) to affect ALL themes:
<style>
   /* Center Logo image and display fully on narrow viewports */
   #banner{
       text-align:center;
   }
   #logo img {
       text-align:center;
       max-width: 100%;
   }
</style>

[Shaliza]

Thank you both, Nscalerr and Retread. I really appreciate the help.

Will try this out tomorrow and let you know how it works out. Am feeling too sleepy to try it out tonight, LOL.

[Shaliza]

So I finally had the chance to try out the coding and it worked great for all the themes when I placed it in the Global Header.

Thanks so much, Nscalerr and Retread. I really appreciate the chance to learn all these news tricks when it comes to coding.