Some styles do not apply on Samsung devices

Question

Some styles do not apply on Samsung devices

Navigation

#1 by (1 votes)

1

I have a form that does not apply any of the CSS styles, but only on Samsung devices, so I come to your help. I leave the code:

PHP

<div class="contenedorValoraciones">
    <div class="estrellasComentario">
        <?php 
        for($i=0;$i<$fila_comentarios["puntuacion"];$i++){
        ?>
            <p class="puntuacion">&#9733; </p>
        <?php           
        }
        ?>
        <h3 class="usuario"><?php echo utf8_encode($fila_comentarios["usuario"]); ?></h3>
    </div>
    <div class="fecha"><?php echo $fila_comentarios["fecha"]; ?></div>
    <div class="mostrarComentario"><?php echo utf8_encode($fila_comentarios["comentario"]); ?></div>
</div>

CSS (the styles indicated with the asterisks are the ones that are not being applied correctly)

.puntuacion{
  display: inline;
  float: right;
  color: orange;    /* No se aplica */
}

.estrellas{
  cursor: pointer;
  color: #ccc;      /* No se aplica */
}

.estrellas:hover{
  color: orange;    /* No se aplica */
}

.estrellas:hover ~ .estrellas{
  color: orange;    /* No se aplica */
}

.formularioComentarios input[type = "radio"]:checked ~ label{
  color: orange;    /* No se aplica */
}

html css samsung

asked by jmz 19.12.2018 в 00:48

source

1 answer

Create a program that allows you to see how many objects have been created in a class Import Files to R

score 1 · Accepted Answer

There is a question on the site in English where it is indicated that this seems to be a problem with the source you use Samsung on your devices and only with some symbols (including the star whose code is ★ ).

In that question, two possible solutions are suggested:

Specify a specific font for the icons: Eldok suggests Icomoon , but it could be worth anything else that has the star and you Like, importing it using @font-face . Something like this (note that you should remove the content of p with class puntuacion ):

@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot?4n7iw5');
    src:url('fonts/icomoon.eot?#iefix4n7iw5') format('embedded-opentype'),
        url('fonts/icomoon.woff?4n7iw5') format('woff'),
        url('fonts/icomoon.ttf?4n7iw5') format('truetype'),
        url('fonts/icomoon.svg?4n7iw5#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

.puntuacion {
  font-family: 'icomoon';
  color: orange;
}

.puntuacion:before {
  content: "\e600";
}

Use the shadow of the letter instead of the letter itself: Craig suggests using text-shadow , that would not require importing anything new to the project, and that if you put it without any blur, it would look like the letter. Something like this:

.puntuacion {
  color: transparent;  
  text-shadow: 0 0 0 orange;
}