Hallo, ich habe im Internet ein einfahes Bewertungs-"Skript" gefunden, das aber leider fixe Maße hat: ~~~css .bewertung { background: url("data:image/svg+xml;...); background-size: contain; display: inline-block; font-size: 0; height: 50px; overflow: hidden; position: relative; white-space: nowrap; width: 250px } .bewertung i { background: url("data:image/svg+xml;...); background-size: contain; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 20%; z-index: 1 } .bewertung input { display: inline-block; height: 100%; margin: 0; opacity: 0; padding: 0; position: relative; width: 20%; z-index: 2; -moz-appearance: none; -webkit-appearance: none } .bewertung input:hover {cursor:pointer} .bewertung input:hover+i, .bewertung input:checked+i {opacity:1} .bewertung i~i {width:40%} .bewertung i~i~i {width:60%} .bewertung i~i~i~i {width:80%} .bewertung i~i~i~i~i {width:100%} ~~~ Was muss ich wie ändern, damit ich es responsive hin bekomme? Vielen Dank für eure Hilfe und Gruß, Enrico

Hallo, ich habe im Internet ein einfahes Bewertungs-"Skript" gefunden, das aber leider fixe Maße hat: ~~~ .bewertung { background: url("data:image/svg+xml;...); background-size: contain; display: inline-block; font-size: 0; height: 50px; overflow: hidden; position: relative; white-space: nowrap; width: 250px } .bewertung i { background: url("data:image/svg+xml;...); background-size: contain; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 20%; z-index: 1 } .bewertung input { display: inline-block; height: 100%; margin: 0; opacity: 0; padding: 0; position: relative; width: 20%; z-index: 2; -moz-appearance: none; -webkit-appearance: none } .bewertung input:hover {cursor:pointer} .bewertung input:hover+i, .bewertung input:checked+i {opacity:1} .bewertung i~i {width:40%} .bewertung i~i~i {width:60%} .bewertung i~i~i~i {width:80%} .bewertung i~i~i~i~i {width:100%} ~~~ Was muss ich wie ändern, damit ich es responsive hin bekomme? Vielen Dank für eure Hilfe und Gruß, Enrico