Ondersteuning » Overige » ik kan niet wijzigen de breedte van naam,tel,etc velden van wpform met CSS?

  • hallo,
    ik heb gratis versie van wpform plug in .
    ik heb het geïnstalleerd om te gebruiken.het is OK
    ik heb met css bepaalde wijzigingen aangebracht op deze form.
    alle wijzigingen ik heb gemaakt met inspecteren en CSS is OK.
    maar er is een 1 probleem. de velden naam, Tel, etc. wordt niet beinvloedt als ik bepaalde waarde geeft bijv. 100% of 400px.
    deze is de code van mij contact pagina . ik ga de code in 2 delen delen om overzichtelijk te maken voor u .
    eerste deel is van contac pagina is: veel gestelde vragen:

    
    

    /*—contact-page –*/

    /*—FAQ–*/

    .container-faq{
    width:45%;
    margin-left:4%;
    float:left;
    margin-top:8.5rem;

    }
    .container-faq h2 {
    padding:0.2rem 48px;;

    color: #4b5054;

    }
    .accordion {
    border:0.2px solid #4b5054;
    width:100%;
    background-color: #4b5054;
    color: #ffd978;
    cursor: pointer;
    padding: 18px;
    text-align: left;
    font-size: 15px;
    transition: 0.4s;
    margin-top:1rem;
    }
    .accordion:after {
    content: “\02C5”;
    color: #ffd978;;
    font-weight: bold;
    float: right;
    margin-left: 5px;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;

    }

    .active:after {
    content: “\02C4”;
    color: #ffd978;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 1s;

    }

    .panel {
    padding: 0 18px;
    background-color:#4b5054;
    overflow: hidden;
    text-align:justify;
    font-size:1.25rem;
    width:100%;
    max-height:0;
    color:#ffd978;
    border:0.2px solid #4b5054;

    }`

    
    tweede deel is wpform:
    
    

    /*– contact-form–*/
    .wpforms-field-label {
    font:42px;
    color:#777;

    }
    #wpforms-402-field_0,#wpforms-402-field_19, #wpforms-402-field_1, #wpforms-402-field_20, #wpforms-402-field_2{
    border:2px solid #4b5054;
    border-radius:25px;
    background:yellow;
    width:100%;

    }

    #wpforms-402-field_19.wpforms-field-small.wpforms-valid {
    background-color:#e8f0fe;
    padding:6px 10px;

    }

    #wpforms-402-field_20.wpforms-field-small.wpforms-valid {

    background-color:#e8f0fe;

    padding:6px 10px;

    }
    #wpforms-402-field_2.wpforms-field-small.wpforms-valid {
    background-color:#e8f0fe;
    }

    #wpforms-402-field_2{

    width:100%;
    }

    #wpforms-submit-402 {
    background-color:#0cf;
    color:white;
    border-radius:12px;
    width:300px;
    }
    #wpforms-submit-402:hover{
    background:#09C;
    -webkit-transition:background 0.3s ease-in-out;
    -moz-transition:background 0.3s ease-in-out;
    transition:background-color 0.3s ease-in-out;

    }
    #wpforms-submit-402:active{
    box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.5)

    }`
    ik heb voor de velden naam, telefoon, email, onderwerp de breedte waarde 100% gemaakt om te zien of het wordt breder . maar er wordt helemaal niets veranderd .
    ik heb ook geprobeerd om pixels te gebruiken in plaats van percentage bijv. width:450 px.
    maar er wordt ook geen enkele beweging in de breedte van deze velden terwijl alle andere css codes werken helemaal goed.
    ik heb voor FAQ 45% breedte gegeven en voor contact form 45% en margin left en right 4%
    voor gehele pagina.
    plus ik heb voor contact form margin left 2 % gedaan van de gedeeld FAQ.
    het maakt totaal 100%.
    het is op flex systeem gebaseerd.
    is er oplossing voor deze probleem of ik moet helemaal met pixels werken?
    dank u wel

    De pagina waar ik hulp bij nodig heb: [log in om de link te zien]

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)
  • Guido

    (@guido07111975)

    Goedemorgen,

    Dit komt door het type veld dat je ingesteld hebt. Ik zie in de CSS code een maximale breedte van 25% staan:

    div.wpforms-container-full .wpforms-form input.wpforms-field-small {max-width: 25%;}

    Guido

    Thread starter johannes999

    (@johannes999)

    Goedemorgen,
    dank u wel,
    kunt u mij screenshot sturen van deze rij in inspecteren. ik kan niet vinden deze rij of code in inspecteren.
    div.wpforms-container-full .wpforms-form input.wpforms-field-small {max-width: 25%;}

    Thread starter johannes999

    (@johannes999)

    ik heb het gevonden,
    in de wpform plug in zelf er is 3 opties voor de breedte van velden.
    1-klein
    2-gemiddeld
    3-groot .
    ik had klein gekozen daarom de velden worden niet breeder.
    nu ik heb gemiddeld gekozen en ik heb deze code toegevoegd:

    
    #wpforms-402-field_0,#wpforms-402-field_19, #wpforms-402-field_1,  #wpforms-402-field_20, #wpforms-402-field_2{
    	border:2px solid  #4b5054;	
    border-radius:25px;	
    	background:yellow;
    	width:40%;
    }
    

    nu het werkt .
    dank u wel dankzij jou ik heb nagedacht .
    ik heb ook jou plug in geprobeerd het is goed maar het kan beter zijn.

    Guido

    (@guido07111975)

    Mooi zo, succes ermee verder!

    Guido

    Thread starter johannes999

    (@johannes999)

    ik wil iets delen met andere webdesign leerlingen .
    om goede contact-form te bouwen U kunt gratis versie van wpform plug in gebruiken plus kijk deze video hoe u kunt stijlen deze wpform plug in met css op eigen wensen:
    de link is : https://www.youtube.com/watch?v=5Cjnf5r_roE

5 reacties aan het bekijken - 1 tot 5 (van in totaal 5)