Ajust width of the header and forum

SFrance

Hello, can we ajust the width of the header and forum without trouble (bugs, 1000 ajustment)
I explain myself: we intragate flarum in our website but, the width is different. Not big different but too much for don't see the difference between the two.
I want to homogenize and make the user really feel like they are on the same platform, not switching from one to another. And ajust the website to the width of the forum is not great (a little to small), so I search for a solution on flarum !

Thanks in advance.

askvortsov

SFrance Certainly, via custom CSS. Note that this will reduce the number of links you can add via fof links, as the header will be smaller.

SFrance

I want upgrade the header. So that will be put more spaces.
But no problem for the rest? With images :

Screen 1

AND :

Screen 2

Don't want create trouble if we ajust.

askvortsov

SFrance Off the top of my head I don't think that would break anything, but I haven't tried anything like this. You'd need to set up the custom CSS yourself.

djemyjenab

SFrance How do you do it? I want to change the width also. Can guide me the css code

clarkwinkelmann

I'm not sure if this achieves what you need, but Flarum responsive breakpoints are defined in Less variables https://github.com/flarum/core/blob/v0.1.0-beta.16/less/common/variables.less#L119-L138

You can override the value of those variables by defining them in the Custom CSS setting in the Flarum admin.

To customize the width of elements that don't depend on the viewport width, you can use the browser inspect tool to find the classNames you need to target.

SFrance

Thanks guys! We put it in place and it's work perfectly!

vaultboy

SFrance +1 How to achieve this? I would like to adjust it to the borders

luceos

vaultboy

@screen-tablet: 768px;
@screen-desktop:  992px;
@screen-desktop-hd: 1100px;

I think it's these.

vaultboy

luceos Didn't noticed any changes

Subarist

vaultboy

.container {
    width: 1200px;
}

Setting the value to "auto" should also allow for adaptive adjustment to the widest screen.

vaultboy

Subarist That's it. Thanks

User31

Subarist By the gotts! 😂The answer was right here this whole time.