Provide the ability to configure display width

moderation

It would be nice in the era of super wide displays to be able to configure an Appearance option for page width. The equivalent option on DuckDuckGo is:

Page Width
Controls the width of the search box and results

And the options are Super Wide, Wide and Normal.

I did try to implement myself using CSS but despite digging into the code with Chrome and Firefox development inspectors, the CSS is so complex that I couldn't work what element to modify. If someone has worked this out it would be great if they could share the CSS Code.

DanielSmith

Hey I just customized this myself today so I may be able to help with the CSS. If you just want to increase the width to a set value it would look like:

:root {
  --center_content_width: 1500px;
}

But if you wanted the width to be a percentage of the page width you can inverse the --app_content_width formula and calc your desired % minus the other stuff that will be added:

:root {
  --center_content_width: calc(100% - calc(var(--center_content_padding) * 2 + var(--wiki_box_width) + var(--wiki_box_margin)));
}

In either case you may also want to set the widgets to a smaller static width or you can get some really large image/video result panels:

.widgetContent {
  max-width: 1000px;
}

One can also combine these and say "a percentage of the page up to a certain limit":

:root {
  --center_content_width: max(calc(100% - calc(var(--center_content_padding) * 2 + var(--wiki_box_width) + var(--wiki_box_margin))), 1500px);
}

moderation

@DanielSmith this is exactly what I was looking for. Thanks so much. I'm relatively well versed in CSS but couldn't get to these core settings. Thanks again. Have gone with static 1800px width and looking much better

Vlad

moderation What did you end up using? Can you send a screenshot

IanHorse

Bumping this thread. Using a 4k monitor at home, and the search results page is 80% white space.

Vlad

IanHorse Did the solution above not work for you?