The forum of the forums

Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums
2 posters

    Widgets on top side by side?

    Sapho
    Sapho
    New Member


    Posts : 2
    Reputation : 1
    Language : Bulgarian, English

    Widgets on top side by side? Empty Widgets on top side by side?

    Post by Sapho January 22nd 2016, 4:43 pm

    Hello there! Mr. Green
    My forum is punBB and I used a code to put the widgets on top of the forum and it works but they appear one under another and I want them to be side by side in a single row on top of the forum.

    This is the code I used:

    Spoiler:
    10spetter10
    10spetter10
    Forumember


    Posts : 195
    Reputation : 82
    Language : Dutch

    Widgets on top side by side? Empty Re: Widgets on top side by side?

    Post by 10spetter10 January 22nd 2016, 6:10 pm

    Try adding this css.

    Code:
    #left {
      display: flex;
    }
    #left .module.main {
      flex: 1 1 50%;
    }
    #left .main-content {
      height: 100%;
    }
    Sapho
    Sapho
    New Member


    Posts : 2
    Reputation : 1
    Language : Bulgarian, English

    Widgets on top side by side? Empty Re: Widgets on top side by side?

    Post by Sapho January 22nd 2016, 7:12 pm

    I put it after the code in the spoiler aand it doesn't work.
    10spetter10
    10spetter10
    Forumember


    Posts : 195
    Reputation : 82
    Language : Dutch

    Widgets on top side by side? Empty Re: Widgets on top side by side?

    Post by 10spetter10 January 22nd 2016, 7:28 pm

    When I add it in-browser it seems to work fine.

    Widgets on top side by side? 39KtuCE

    Maybe it is some cross-browser issue, try this:

    Code:
    #left {
      display: -webkit-flex;
      display: -moz-flex;
      display: -ms-flex;
      display: flex;
    }
    #left .module.main {
      -webkit-flex: 1 1 50%;
      -moz-flex: 1 1 50%;
      -ms-flex: 1 1 50%;
      flex: 1 1 50%;
      background: #FBFBFB;
    }
    #left .main-head {
      background: #56433C;
    }
    #left .main-content {
      height: 100%;
    }

      Current date/time is November 13th 2024, 7:25 pm