[Fugg]

I personally browse HF on 90% zoom. Been messing around with my banner, and noticed the full banner isn't viewable @ 100%. I tried this across two different browsers and was able to replicate the issue.

I use 1525x200 as my banner size. Why does the viewrange of the banner change with zoom? And why would the full banner not be visible at default zoom?

[GenericSkid]

The banner is in two divs: Aligner > Aligner-item--fixed

The short answer is because of FlexBox.

Long answer (Click to View)
So if we take a look at the CSS that controls this we find this:

PHP Code


<?php 
.Aligner {
 display: flex;
 align-items: center;
 justify-content: center;
}

.Aligner-item--fixed {
 -webkit-box-flex: 0;
 -webkit-flex: none;
 -ms-flex: none;
 flex: none;
 max-height: 200px;
} 


You can play around with it using FireFox's style editor.

The important item to note here though is max-height: 200px;.
This line means the aspect ratio is based off of the height of the image. Not the width. So if you make your banner thinner, more of it will show due to the ratio of the height of the image to the space given in the profile banner section.

[Fugg]

The banner is in two divs: Aligner > Aligner-item--fixed

The short answer is because of FlexBox.

Long answer (Click to View)
So if we take a look at the CSS that controls this we find this:

PHP Code


<?php 
.Aligner {
 display: flex;
 align-items: center;
 justify-content: center;
}

.Aligner-item--fixed {
 -webkit-box-flex: 0;
 -webkit-flex: none;
 -ms-flex: none;
 flex: none;
 max-height: 200px;
} 


You can play around with it using FireFox's style editor.

The important item to note here though is max-height: 200px;.
This line means the aspect ratio is based off of the height of the image. Not the width. So if you make your banner thinner, more of it will show due to the ratio of the height of the image to the space given in the profile banner section.

So, I guess I just don't understand why does it have a ratio? I would like to be able to design elements of the banner around my avatar and based on the edges of my banner. Is there no way for the banner to be set where it doesn't change sizes or positions depending on user's browser? Obviously it would have to be done server side.
And then maybe we can have the option of a mobile banner too? Haven't seen the new HF profiles on mobile yet... unsure what it looks like there.

[SIM-4086413]

So, I guess I just don't understand why does it have a ratio? I would like to be able to design elements of the banner around my avatar and based on the edges of my banner. Is there no way for the banner to be set where it doesn't change sizes or positions depending on user's browser? Obviously it would have to be done server side.
And then maybe we can have the option of a mobile banner too? Haven't seen the new HF profiles on mobile yet... unsure what it looks like there.

Why not post this in the suggestions sections to see if others care aswell and there is a demand for this or convo xerotic when he is done moving to vegas i mean this isn't realy a bug in my opinion.

[Omniscient]

Why does the viewrange of the banner change with zoom?

Because you are changing the view.

I use 1525x200 as my banner size.

Yeah, that seems about right.

HF has a dynamic width. It wasn't designed for profile banners. We have them but I'm not sure we could ever make them perfect with css for how we implemented the banner. The profile avatar in the banner adds even more difficulty.

Xerotic did the css. If someone has a better suggestion on implementation I'm sure we would consider it.

btw, I see your banner fine at 90% zoom with my screen size.

[Fugg]

Because you are changing the view.


Yeah, that seems about right.

HF has a dynamic width. It wasn't designed for profile banners. We have them but I'm not sure we could ever make them perfect with css for how we implemented the banner. The profile avatar in the banner adds even more difficulty.

Xerotic did the css. If someone has a better suggestion on implementation I'm sure we would consider it.

btw, I see your banner fine at 90% zoom with my screen size.

Truthfully. The banners all appear fine at 90% and lower for me. That is my point... why do the appear fine @ 90%, but at 100% they are clipped? Shouldn't the default page scale be set where all contents on the webpage... including images and banners can be seen as intended? To be quite honest, I think HF looks 5x better on 90%. 100% zoom reminds me back when you first installed Windows 7 and the title bar on some applications didn't match your screen resolution and looked chunky @ stretched. Windows would ask you if you wanted to scale or something... your monitor would flash black and everything suddenly looked much better and more modern.

HF feels too chunky and in my face at 100%. It gives off a subconscious appearance of being geared towards a younger audience. You don't notice this until you zoom out a tiny bit, and the site then gives off a much more official, clean-cut mature aesthetic.

[Crimin4L]

I've noticed this while making banners for myself and others. I usually have to accommodate for this and make whatever is near the edge closer in.

I've always wondered why..

[Omniscient]

HF feels too chunky and in my face at 100%. It gives off a subconscious appearance of being geared towards a younger audience. You don't notice this until you zoom out a tiny bit, and the site then gives off a much more official, clean-cut mature aesthetic.

Everyone is going to have different viewpoints according to their device, browser size, resolution, and even their eye-sight. As an older person the larger size of HF helps me see things more clearly. You consider that immature though.

We are just not going to default in a way that makes everyone happy. This is why your browser allows you to do percentage changes to the view. Don't ask us to change something to suit your personal needs.

[Prepper]

I am not sure why your banner looks like that, my banner is the correct recommended size and it shows just fine and I am running it with a 24" monitor with display/scale set to 125 in display settings.

But even prior to setting to 125 it looked fine to me.

[⁠Cammy]

I can see your Thierry Baudet banner just fine at various zoom levels

[Fugg]

I can see your Thierry Baudet banner just fine at various zoom levels

Because, I purposefully scooted it over.
The banner I had previously which was aligned to the right margin was cut off @ 100%.

Regardless, closing.