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í

Rafael Hernández
  • 796
  • 3
  • 12
  • 26
  • No veo que estés aplicando media queries para obtener un diseño _responsive_ que es lo que creo pretendes hacer. Te recomiendo que [leas esta respuesta](https://es.stackoverflow.com/a/50787/29967) a la pregunta: [CSS: ¿Qué son los media queries, para qué sirven, cómo se agrupan y cómo implementarlos?](https://es.stackoverflow.com/q/50786/29967) – A. Cedano Jun 09 '17 at 23:54
  • el problema no son los mediaqueries. se tendrian que aplicar estilos que no se estan aplicando y estoy utilizando modernizr, bootstrap no se donde esta el fallo – Rafael Hernández Jun 10 '17 at 03:30
  • Ya viste en consola si se están cargando los css? – Luis Ozuna Jun 11 '18 at 17:41

1 Answers1

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

Alejo Florez
  • 828
  • 8
  • 24