Full width

  • organisator

    (@organisator)


    5 years ago

    Hello,

    I am about to move a site from wordpress.com to my own site bmd-bibi.de

    I like the theme twenty fourteen, used it already with wordpress.com an would now like to get rid of a problem which I already encountered in the old installation: On some displays, for example on my standard 15,6-inch-notebook, the website does not fill the whole display but leaves a broad empty margin on the right side.

    Up to now bmd-bibi.de only consists of one blog entry called “Hello world!” and one page called “Sample Page”. For the sample page I activated the “full with template” but noting changed.

    Is there a way to stretch the website on the whole display?
    Is there any problem with the picture in the header, does it have not enough pixels in broadness?

    Thank you very much!
    organisator

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • tapiohuuhaa

    (@tapiohuuhaa)

    5 years ago

    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.

    Thread Starter organisator

    (@organisator)

    5 years ago

    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?

    tapiohuuhaa

    (@tapiohuuhaa)

    5 years ago

    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.

    Thread Starter organisator

    (@organisator)

    5 years ago

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

    tapiohuuhaa

    (@tapiohuuhaa)

    5 years ago

    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.

    Thread Starter organisator

    (@organisator)

    5 years ago

    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.

    tapiohuuhaa

    (@tapiohuuhaa)

    5 years ago

    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.

    tapiohuuhaa

    (@tapiohuuhaa)

    5 years ago

    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.

    tapiohuuhaa

    (@tapiohuuhaa)

    5 years ago

    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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Full width’ is closed to new replies.