0

Hola en mi portatil se ve bien la web. y si redimensiono la web a resolucion movil se ve también bien. pero cuando subo al ftp la web y la veo desde mi movil muchas cosas no funcionan como el menu, el border-radius: 50% de una imagen o dos iconos de fontawesome no cogen los estilos css.

No sé por donde mirar para solucionarlo. la imagen que debe ser circular se ve normal(cuadrada).

<article id="work">
    <div class="container">

        <h2 class="text-center">trabajos</h2>
            <section class="showcase text-center">
                <ul class="row">
                    <li class="col-sm-6 col-md-4">
                        <a href="#">
                            <img src="images/1.png" alt="work preview">
                        </a>
                    </li>
                </ul>
            </section>

    </div>
</article>

#work .showcase li a {
  border: 10px solid #f2f2f2;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  -moz-transition: border-color .5s ease;
  -o-transition: border-color .5s ease;
  -webkit-transition: border-color .5s ease;
  transition: border-color .5s ease; }

#work .showcase li a:hover {
  border-color: #fff; }

#work .showcase li a img {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  opacity: 0.5;
  -moz-transition: opacity .5s ease;
  -o-transition: opacity .5s ease;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease; }

#work .showcase li a:hover img {
  opacity: 1; }

#work .showcase li img {
  max-width: 100%; }

introducir la descripción de la imagen aquí

3

1 respuesta 1

0

Puedes agreager un estilo css especial para cuando tu resolucion sea menor a 900 px (resolucion gama media de celulares) o cual sea tu ancho de la pantalla predeterminado, con este codigo

@media screen and (max-width: "pixeles")
{}

Colocando en "pixeles" el maximo de pantalla que aplciara ese estilo, me explico, si tu hancho maximo de pantalla para estilo es 340px el codigo seria algo como:

@media screen and (max-width: 340px)
{}

Asi cuando un dispositivo con un ancho de pantalla igual o menor a 340 pixeles se vera afectado con el css los estilos que hayas definido

Espero te sirva

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.