Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #913321

    Dear Enfold support team,

    I have a problem I couldn’t find any solution for. On my blog, the standard comment form looks different than the “reply-to” comment form.

    In the standard comment form, all the labels are aligned right, they are placed next to the input fields like so:

    comment form level 1

    In the reply-to form (after clicking reply/antworten), the labels are aligned above the fields like so:

    comment form reply-to

    I want to place the labels above the fields in the standard form as well, since the right-aligned labels text doesn’t scale well on mobiles.

    I added the following CSS code:

    #commentform label {
    	display: block !important;
    	}

    This aligns the labels correctly on the reply-to form, but not on the standard form. Is there any way to make the standard form look like the reply-to form?

    thanks,
    Ritchie

    PS: Live link: https://datenschmutz.net/rick-and-morty-season-3/

    #913556

    Hey Ritchie,

    Where can I see the standard form? On this page, I only see the comment form and on the contact page the form is different.

    Best regards,
    Victoria

    #913659

    Hi Victoria,

    thanks for getting back to me! The contact form is fine – I’m referring to the “reply to” function in comments.

    The “normale” (level 1) comment form, when someone doesn’t reply to another comment but rather start a new comment thread, looks differently than the form that is displayed after somebody clicks “reply to” on an existing comment.

    It’s a bit complicated to explain – and my blog is in German. Reply to is “antworten”.

    Hope I could clarify :)

    thanks again,
    Ritchie

    #913694

    Hi,
    Try this code in the General Styling > Quick CSS field:

    #top #respond.comment-respond .comment-form-author input,#top #respond.comment-respond .comment-form-email input,#top #respond.comment-respond .comment-form-url input {
        width: 220px!important; 
    }
    #top #respond #commentform label {
        position: absolute!important; 
        left: 245px!important; 
    }

    Best regards,
    Mike

    #913718

    Hi @Mike,

    thanks a lot! Almost there :) Is it also possible to do it the other way round? (Make the normal comment form look like the reply-to comment form with the labels aligned above the input fields.)

    Because the problem with the right-aligned labels is this on smaller screens (I marked the overlapping label texts in red):

    comment labels

    greetings,
    Ritchie

    • This reply was modified 6 years, 10 months ago by datadirt.
    #913867

    Hi,
    Lets try to make the above code only work on tablets and above, so on mobile it will be the other way. So use this code instead.

    @media only screen and (min-width: 767px) { 
    #top #respond.comment-respond .comment-form-author input,#top #respond.comment-respond .comment-form-email input,#top #respond.comment-respond .comment-form-url input {
        width: 220px!important; 
    }
    #top #respond #commentform label {
        position: absolute!important; 
        left: 245px!important; 
    }
    }

    Best regards,
    Mike

    #916036

    Hi @Mike,

    thank you very much – you guys are geniusses!

    One last question: Is it also possible to *always* position the labels above the input fields (in both forms)?

    greetings,
    Ritchie

    #916063

    Hi,
    We could work on that but you would need to remove the above custom code as it is hard to over write “!important;”. Did you find that the above code was not working for you?

    Best regards,
    Mike

    #916174

    Hi Mike,

    it’s basically an issue with the GDPR explanation – it has too be lengthy, and it never breaks nicely on smartphones. That is why I would prefer this solution over any other.

    I can of course remove the above code again. I also did some customization on the look of the comment fields – posting it here in case something interferes:

    #comment {background-color:#e1edf3!important; border:1px solid #4b758a !important;padding:9px !important;}
    #comment:focus {border:2px solid #4b758a !important;padding:7px !important;}
    #author {background-color:#e1edf3!important; border:1px solid #4b758a !important;padding:9px !important;}
    #author:focus {border:2px solid #4b758a !important;padding:7px !important;}
    #email  {background-color:#e1edf3!important; border:1px solid #4b758a !important;padding:9px !important;}
    #email:focus {border:2px solid #4b758a !important;padding:7px !important;}
    #url  {background-color:#e1edf3!important; border:1px solid #4b758a !important;padding:9px !important;}
    #url:focus {border:2px solid #4b758a !important;padding:7px !important;}
    #submit {font-size:18px !important;width:100% !important;}
    
    #commentform label {
    	display: block !important;
    	}
    
    #commentform label[for=comment-mail-sub-list] {display:boxed !important;position:relative !important;clear:both !important;}
    #commentform label[for=comment] {display:none !important;}
    #commentform .required {display:none !important;}
    #commentform .notice {display:none;}
    .comment-form-gdpr {margin-bottom:20px !important;}
    #commentform select {
       border:1px solid #4b758a !important;
       background-color:#e1edf3 !important;
       font-size:15px !important;
       padding:3px !important;
    }
    
    .comment_text {font-size:16px !important;}
    

    greetings,
    Ritchie

    #916485

    Hi,
    There still seems to be some custom code in your css, perhaps a admin login in the Private Content area will be easier.

    Best regards,
    Mike

    #916601

    Hi Mike,

    thank you, awesome – there’s a bunch of CSS rules in there, been using Enfold for quite a while. Thanks a lot!!

    greetings,
    Ritchie

    #917164

    Hi,
    Ok, I removed the code:

    @media only screen and (min-width: 767px) { 
    #top #respond.comment-respond .comment-form-author input,#top #respond.comment-respond .comment-form-email input,#top #respond.comment-respond .comment-form-url input {
        width: 220px!important; 
    }
    #top #respond #commentform label {
        position: absolute!important; 
        left: 245px!important; 
    }
    }

    and added:

    #commentform label {
        position: unset!important; 
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

    #917178

    Hi Mike

    thank you so much!!! This is perfect.

    Have a great weekend!

    greetings, Ritchie

    #917187

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘Level 1 Comment form vs Reply-to Comment Form’ is closed to new replies.