Largeur input responsive

Dev
1

Bonjour,
Je n’arrive pas a réduire la largeur de mon input
Je vous partage mon code:

  • {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

body {
padding: 20px 15%;
}
form header {
margin: 0 0 20px 0;
}
form header div {
font-size: 90%;
color: #999;
}
form header h2 {
margin: 0 0 5px 0;
}
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}

input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea {
width: 100%;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password] {
width: 50%;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
textarea:focus {
outline: 0;
border-color: #4697e4;
}

@media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
textarea,
select {
width: 100%;
}
}

.myButton {
background-color:#44c767;
border:1px solid #44c767;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:15px 26px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}

@media (min-width: 1200px) {
form > div > label,
legend {
text-align: right;
}
}

2

Salut,

Au-delà de la forme du thread qui donne pas vraiment envie de répondre, je t’invite à mettre ton code sur un https://jsfiddle.net/ ou équivalent, cela nous permettra plus facilement à identifier le problème et éventuellement aider :slight_smile:

Ah, et le HTML aussi -_-

3

+1, le css c’est bien, mais avec le html qui va avec, c’est mieux tant qu’à faire

4

Oula, faudrait voir a pas s’emballer non plus :smiley:

4 « J'aime »
5

Effectivement, manquerait plus qu’on poste des trucs qui vaillent la peine d’être lu !

6

Désolé si j’ai été trop sec.
Voici après la demande de @Gratz je vous fait parvenir le lien:
https://jsfiddle.net/mbnqozwh/1/
J’aimerais savoir comment faire pour redimensionné car je trouve pas :confused:

Merci d’avance.

7

form > div > div,
form > div > fieldset > div {
width: 40%;
float: right;
}

1 « J'aime »
8

Merci beaucoup, tu m’aides dans mon projet

9

De rien. A part ça je trouve ça un peu étrange d’avoir le type “email” et un maxlenght à 255 dans un champs pour saisir le CVV (code à 3 chiffres) tu as trouvé ça où ?

10

Si y’avait que ça, hein. Le body dans le form, nope. Ou le head fermé à la fin. Il est urgent d’apprendre à faire de l’HTML. Mais bon, ça sert sûrement à rien (sigh).

11

Il vaut surement mieux acheter DOPUS a la place hein… sigh