Move Comments area

[FunkyCss]

Hallo GP Team once again ,

I want to ask if is possible to move comments area inside a specific area like a custom collumn ?

I mean i have a specific page where is a live video and i will create a scrollbar box where i want the comments to be displayed inside , but i need the video on the left and comments on the right .

I have made a demo and send it to you on the link .

I will have my comments only visible on this specific page so i dont mind for other pages ,

this page will be a custom template if there is no other way to do that so any tips will be higly apreciated!

[David]

Hi there,

will the page content just consist of the Video and the Comments – nothing below that?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[FunkyCss]

Hallo David and thank you for your super fast reply ,

I Just need the video and the comments box in that page . i will have only my footer bellow them both but no content . and i will wrap the comments section so i will make it like a scroll bar .

[David]

You could do something like this to add a grid to the site-main container:

@media (min-width: 769px) {
    .page-id-326 .site-main {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .page-id-326 .site-main>.comments-area {
        padding: 0;
        overflow-y: scroll;

    }

    .page-id-326 .site-main>.comments-area,
    .page-id-326 .inside-article {
        min-height: 500px;
        max-height: 500px;
        box-sizing: border-box;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[FunkyCss]

Wow David looks awesome! Just one more question and so sorry that i forgot it before when you asked !

But can i have the ” Join the Discusion ” out of the scroll box ? or bellow it ? or it cant be done with css ?

[David]

Hmmm – could make the the Comment Form sticky ? May need a little tweaking but something like this:

#wpcomm .wc-form-wrapper {
    position: sticky;
    position: -webkit-sticky;
    top: 20px;
    z-index: 1;
    background-color: #fff;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[FunkyCss]

Hallo David ! i finally made it and decided to let it simple , you can check the link ! i want to thank you so much my friend ! works great !

[David]

Awesome – glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts