Enrico: Wie kann ich diesen Code responsive machen?

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

  1. @@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 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    1. 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

      1. 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

        1. Hallo Gunnar,

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

          Gruß Enrico

  2. @@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 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.