Full width

If you put the same color for the html, which you use for left sidebar, it doesn’t look so bad.

I would be hard work try to alter the default behavior with your own css.

you should set for html, body and for the main menu margin-left:auto, margin-right:auto;
But how to get the main menu working correctly might cause problems.

• This reply was modified 5 years, 11 months ago by tapiohuuhaa.
• This reply was modified 5 years, 11 months ago by tapiohuuhaa.

I like the same black background for the upper menu and the left menu. I think it helps distinguishing between menues and content.

So you think I should rather accept the broad empty margin on the right side than trying to getting rid of it?

In this case can you recommend another theme which gives the opportunity to put a header photo on the top which can be scrolled up but the upper menu stays at the top? And a menu on the left side as well?

I just show my solution:
https://www.sanaristikkofoorumi.net/wordpress/forums/forum/muut-aiheet/wordpress-bbpress/
I don’t use the left side bar at all (in fact I set for it visibility:hidden – not display:none, because it might cause problems).
Try to find at least suitable color for the html/body element.
I like this theme because of nice search and nice menues.

As I told it might be possible to fix the problem by setting
@media screen and (min-width:1281px){
html,#primary-menu-container {width:1280px!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}}

That might help positioning all the content + menu correctly. But it might fail too because of usage of position with a way, which cause with that CSS incorrect result. You should look carefully, what element have been positioned and how.

So you decided to leave the left side bar empty and the result is empty space on both sides which looks intentionally. Tricky idea! ??

It is for many purposes quite narrow and not very useful. If you put to that place some navigation, it becomes in mobile phones as third content area. Before it is commonly another links and other stuff of the right bar. If you need additional links, you can use footer area.

with 800px wide the result would be quite the same, if you put the same stuff to footer.

Sorry, I would like to have a theme which fills the complete display automatically on common computers, e.g.
a 10 inch tablet
a standard 15,6-inch notebook display
a 24 inch desktop display

I could accept some difficulties on mobile phone displays.

You can try to fix the positioning methods I explained earlier. Anyway the maximum usable area with this theme is 1280px, which is a quite typical solution.

https://keskustelu.suomi24.fi/ uses that value.

In wide screen you have 240px space for content on the left side bar.
I don’t remember what is the minimum value for it. Maybe it was about 180px before disappearing.

With iPad 9,7 used as portrait mode, on the both sides would be about 250px empty space.
You might succeed to position the content ok. Just try with the media rule, I explained.
If you succeed to position the content, but failed with menu, you must look from the CSS how it has been done. It might have some JavaScript tricks, which might destroy positioning as you wish (normally the navigation first move and then stops – this apparently needs JavaScript).

If you fail and you don’t figure, what to do, then change the theme.

BTW. I my site usage of mobile phones is commonly about 35%, in one day 55%. Taking account mobile phones is important.

• This reply was modified 5 years, 11 months ago by tapiohuuhaa.

There are several layers of element.

div.menu-ylavalikko-container{position:fixed:top:48px;width:100%;}
div.menu-ylavalikko-container #primary-menu {margin-left:auto!important;margin-right:auto!important;position:static!important;padding:0!important;}
html,body.page-id-10958,#primary-menu-container,#page,#main,#main-content,#primary,#colphon{max-width:1280px!important;margin-left:auto;margin-right:auto!important;box-sizing:border-box}#main-content {margin-left:0!important;margin-right:0!important;box-sizing:border-box!important;}}

Look at the layers

id=”page” – contains also header
1. id=”main
2. id=”main-content”
3. id=”primary”
4. id=”colphon” -footer

I get main content and footer area positioned as you wish. But the problem is do you success to position the main menu and get the search positioned ok.

• This reply was modified 5 years, 11 months ago by tapiohuuhaa.
• This reply was modified 5 years, 11 months ago by tapiohuuhaa.

Sorry, that might not work.
This must divide into two issues. header and main content + footer.

Html, body and page must have full width.
main and colophon 1280

header must think fist #masthead as 100% width and inside it 1280px for container of the menu.