Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • March 1, 2021 at 2:36 am #1284305
    Pako

    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.

    March 2, 2021 at 5:48 am #1284617
    Rikard

    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

    March 2, 2021 at 12:27 pm #1284697
    Pako

    Unfortunately, nothing happens with the provided code.

    March 3, 2021 at 2:15 am #1284914
    Jordan Shannon

    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

    March 3, 2021 at 5:52 am #1284948
    Pako

    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 3 years, 9 months ago by Pako.
    March 10, 2021 at 12:26 pm #1287062
    Yigit

    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

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.