Site Banner and Boad Images Broken

[FableTheWolf]

So here's my problem:




When I first made the forum everything lined up, or I got it to. When I had to buy a new laptop, which had a slightly bigger resolution, I realized that the images didn't make it to the end- and in fact was really surprised with how much space there is at the end. I know that this isn't just a display issue on my computer because I've opened up my site on a desktop with an even larger screen and it still happens.

I don't know how to fix this problem or really what causes it. The first thing I tried was to lengthen the image, but then I noticed that it can't be lengthened; the banner image size starts to decrease so that the larger width can be accommodated.
Something that was suggested to me a long time ago as a fix for board images (which I had problems with previously) was this code:

.container>.title-bar.bbcode h2{ width: 100%!important;}

And it had no effect on the images of course, when I moved the percentage around.

The only fix I have come across so far is reducing the forum width to about 73%, but that messes with other things of course so that's not really a desirable solution for me (I'm currently sitting on 91)

I scoured CSS for any width values I could mess with but I didn't see any.

So...does anyone know what this is and how to fix it?

[Star's Legacy]

Without a link to your site I can only take a guess, but I would think that your forum width is set to a percent rather than a fixed px. If you change it to a fixed px number then you control how wide the forum is other wise when it is in a percentage it will depend on the resolution of the screen viewing the forum as to how wide it will be. This is because when set to a percentage, the forum will take up that percentage of the screen viewing the forum. So the wider the screen, the wider the forum will be.

[FableTheWolf]

Star's Legacy Do you happen to know how I could set it to a px number?

[Tumbleweed]

FableTheWolf, If you go to: Admin> Themes> Advanced Styles & CSS> Visual Editor> you'll see the width option and then your entry would be 960px or so considering padding around the image. (You'd have to fiddle with the 960px to get it perfect.)

Another option you might try is setting the image width to be 100% but that could make some really tall images on super wide resolutions so maybe not a good option but that would be adding this to the bottom of your style sheet:


.title_wrapper img {
width: 100%;
}

[FableTheWolf]

Thanks Tumbleweed XD I'm just not a webcoder. I went with the pixel width change because like last time, adding the additional code to the CSS did nothing Glad it looks better now XD

[Tumbleweed]

Well, you have to target the right thing with css and what you posted you tried wasn't the right thing but maybe you did try what I posted. The reason I suggested css  is the image will shrink with screen resolutions and will always be 100% of any larger screen res.

Example of your site (I think this is the site you are working on? I found it in your profile). This is full screen as your site is now and I see a tiny bit more of a gap on the right of the pic.




This second one is my window shrunk as your site is now. See how it cuts off the image.



This is with 100% added like I posted and full screen that extra bit of space is gone and equal to the left side.




This is with 100% added and my screen shrunk and notice the whole image shows.




But anyway, it's up to you how you want to go about fixing it. Pixel width, like Star's Legacy suggested is just fine for making sure it fits in the board properly, in all larger resolutions.