Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1284305

    Hi,

    i just searching around your support sites, but i can´t find the correct solution, just only parts of it. Hopefully you may help with this:

    I want to have the both comment form fields the same size and using the full width of the site, as you can see in red in the picture. If this works, the 2nd thing is, that mobile phones should ignore this, and use one field per line in full width, because the screen is too little to keep two fields in one line.

    Example

    And if both things are working, is there a way to get the field description, like Name, E-Mail and Website, into the Fields itself, so when i want to type in it, the description disappears? Like in the Contact Form?

    Contact Form

    The Goal is, that the comments form looks more like the contact form.

    Thank you, in advance.

    #1284617

    Hey Pako,

    Please try this in Quick CSS:

    p.comment-form-author, p.comment-form-email {
          width: 49.7%;
    }
    
    p.comment-form-author input , p.comment-form-email input {
          width: 100%;
    }

    The comment form looks like your screenshot already, so I’m guessing that you found a solution for that?

    Best regards,
    Rikard

    #1284697

    Unfortunately, nothing happens with the provided code.

    #1284914

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, clear the cache a few times over.

    Best regards,
    Jordan Shannon

    #1284948

    Yes, i tried it up, under, next to other codes. It just not work. Caching is disabled in developer view in chrome.

    Thats all CSS i use currently:

    /* Socket (Fusszeile) sichtbar */
    @media only screen and (min-width:959px){
    #top #socket {
        position: fixed;
        width: 100%;
        bottom: 0;
        z-index: 999;
    }}
    /* Text und Ausrichtung Masonry (Blog, Datenbank) */
    .av-inner-masonry-content {
    	min-height: 80px;
    	text-align: center;
    }
    .minitext {display: none !important}
    /* Nach oben Scollen Knopf auf iPhone, iPad */
    @media only screen and (max-width: 767px) {
    .responsive #scroll-top-link {
        display: block !important;
    }}
    /* Vollbild Bilder scrollen unterdrücken */
    .avia-fullscreen-slider .avia-slideshow {
    max-height: 86vh!important;
    }
    /* Farbe für die Masonry Beschriftungen */
    .main_color .container .av-inner-masonry-content, .main_color .container .av-inner-masonry-content .avia-arrow {
    background: #fafafa;
    }
    /* Masonry maximal 4 Spalten */
    @media only screen and (min-width: 1800px) {
    .responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry.av-landscape-img {
        width: 49.80%; 
    }
    .responsive.html_av-framed-box .av-masonry-col-flexible .av-masonry-entry {
        width: 24.90%;
    }}
    /* Inhalte in der Fußzeile am Rand behalten und Kosmetik */
    #socket {
       left: 0;
    }
    #socket .container {
       max-width: 96%;
       padding-left: 0;
       padding-right: 0;
       margin: 0 auto;
    }
    footer#socket.container_wrap.socket_color{
    border:0px!important;
    }
    /* Senden Button unter Kontakt volle Breite*/
    #top .avia_ajax_form .button {
        width: 100%;
    }
    /* Comment labels on top of the forum fields */
    #top #commentform label {
        position: relative;
        left: 0;
    }
    /* Kommentarsenden Button in voller Breite*/
    #commentform .form-submit input {
      width:100%;
    height:46px;
    }
    
    /* Kommentarfeld Webseite ausblenden */
    #top #wrap_all .comment-form-url {
      display: none;
    }
    /* Kommentarfelder nebeneinander */
    #commentform p.comment-form-author,
    #commentform p.comment-form-email
    { 
      display:inline-block;
    }
    /* Kommentarfeld-Breite */
    p.comment-form-author, p.comment-form-email {
          width: 49,7%;
    }
    p.comment-form-author input, p.comment-form-email input, p.comment-form-url {
          width: 100%;
    }
    /* Kommentarfeld Privacy Checkbox korrekt platzieren */
    #top #commentform .form-av-privatepolicy.comment-form-av-privatepolicy  label {
        left: 20px;
        top: -28px;
    }
    • This reply was modified 8 months, 4 weeks ago by  Werk32.
    #1287062

    Hi,

    Please add following code to Quick CSS

    @media only screen and (min-width: 767px) {
    #commentform p.comment-form-author, #commentform p.comment-form-email {
        width: 49%;
        float: left;
    }
    #commentform p.comment-form-email {
        margin-left: 2%;
    }}

    Best regards,
    Yigit

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.