Wie kann ich diesen Code responsive machen?

[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

[Gunnar Bittersmann]

@@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
}

Dich stört die fixe Breite? Dann gibt sie doch in % an. Breiten von Nachfahrenelementen scheinen ja alle in % angegeben zu sein, sollten sich also entsprechend mitskalieren.

Damit die Box ihr Seitenverhältnis 5:1 behält, müsste die Höhe in Abhängigkeit von der Breite angegeben werden. Das könnte mit height: 0; paddig-top: 20% gelingen.

Ansonsten bitte Link zur Beispielseite/Codepen/Dabblet.

LLAP 🖖

[Enrico]

Hallo Gunnar,

vielen Dank, dass Du Dich so schnell gemeldet hast!

Ich habe die Seite (mit dem gescheiterten Versuch, die fixe Breitenangabe beispielsweise durch 5vw zu ersetzen) hochgeladen.

Gruß Enrico

[Enrico]

Hallo Gunnar,

die Ausgabe habe ich jetzt responsive hinbekommen, allerdings funktioniert der hover-Effekt nun leider nicht mehr. Deine Tipps habe ich sowohl bei der Box als auch der Definition des ersten Sterns (.bewertung i) umgesetzt.

Gruß Enrico

[Enrico]

Hallo Gunnar,

setze ich Deine Tipps auch beim ".bewertung input" um, dann habe ich dasselbe Resultat.

Gruß Enrico

[Gunnar Bittersmann]

@@Enrico

ich habe im Internet ein einfahes Bewertungs-"Skript" gefunden

Ohne Label für die Eingabefelder ist das aber nicht per Tastatur zu bedienen, schon gar nicht barrierefrei.

Ich hab da mal was gebastelt. Einen Submit-Button hinzuzufügen und anstatt Unicode-Sterne SVG zu verwenden überlass ich dir.

LLAP 🖖