Buen día:
Hoy quiero compartir algo de css que me ha servido mucho y seguro a alguien mas le puede ser útil.
Para la empresa en la cual trabajo actualmente me han solicitado hacer un footer así:
Una vez quedo listo, nos dimos cuenta que en la versión móvil el footer no se veía tan bien como se esperaba, así que se decidió hacer un footer mas sencillo para la versión móvil.
Quedando así:
Ahora solo nos hace falta mostrar el footer de acuerdo a la resolución de pantalla
HTML de los Footer
CSS para la detección de resoluciones de pantalla.
Espero le pueda ser de utilidad a alguien.
Media querys utiles, principalmente los de iPad ya que casi siempre hay que hacer retoques por css para estos dispositivos.
CSS3: Listado de Media Queries para dispositivos móviles (tomado de bufa.es)
Saludos
Hoy quiero compartir algo de css que me ha servido mucho y seguro a alguien mas le puede ser útil.
Para la empresa en la cual trabajo actualmente me han solicitado hacer un footer así:
Una vez quedo listo, nos dimos cuenta que en la versión móvil el footer no se veía tan bien como se esperaba, así que se decidió hacer un footer mas sencillo para la versión móvil.
Quedando así:
Ahora solo nos hace falta mostrar el footer de acuerdo a la resolución de pantalla
HTML de los Footer
<div class="black">
<div class="ppal">
<div class="uno">
<b>QUIÉNES SOMOS</b><hr>
Somos una agencia digital
con 21 años de
experiencia, expertos en
estrategia, marketing y
tecnología digital,
certificados en Calidad
ISO 9001 desde el 2003
</div>
<div class="dos">
<b>ENLACES</b><hr>
<a href="home">Home</a>
<a href="quienes-somos/">Quiénes somos</a>
<a href="nuestros-productos/">Nuestros productos</a>
<a href="casos-exito/">Casos de éxito</a>
<a href="contacto/">Contáctenos</a>
<a href="trabaje-con-nosotros/">Trabaje con nosotros</a>
</div>
<div class="tres">
<b>¿DÓNDE ESTAMOS?</b><hr>
Colombia
Tel: +57 (1) 592-4848
Fax: +57 (1) 636-2810
Calle 98 # 9A - 21 / Piso 5
Bogotá, Colombia
Estados Unidos
+1 (305) 424-1345
Perú
+51 (1) 707-3844
Panamá
+50 (7) 836-5815
</div>
<div class="cuatro">
<b>REDES SOCIALES</b><hr>
<div><img src="wp-content/uploads/2016/07/001-1.png" width="46" height="46"></div>
<div><img src="wp-content/uploads/2016/07/002-1.png" width="46" height="46"></div>
<div><img src="wp-content/uploads/2016/07/003-3.png" width="46" height="46"></div>
<div><img src="wp-content/uploads/2016/07/004-1.png" width="46" height="46"></div>
</div>
<div class="sep"></div>
</div>
</div>
<!-- Fin Footer Desktop 4 columnas -->
<!-- Footer Movil super sencillo -->
<div class="redes">
<img src="wp-content/uploads/2016/07/001-1.png" width="46" height="46">
<img src="wp-content/uploads/2016/07/002-1.png" width="46" height="46">
<img src="wp-content/uploads/2016/07/003-3.png" width="46" height="46">
<img src="wp-content/uploads/2016/07/004-1.png" width="46" height="46">
</div>
<!-- Fin Footer Movil super sencillo -->
<div class="copy">
<b>© 2016 TODOS LOS DERECHOS RESERVADOS</b>
</div>
CSS para la detección de resoluciones de pantalla.
<style>
//Este css detecta la resolución de la pantalla cuando tiene un ancho maximo de 600px, con esta sentencia css se oculta el div del footer de escritorio y se muestra el footer movil.
@media screen and (max-width: 600px){
.redes{
width:100%;
display:block;
text-align: center;
background:black;
}
.black{
display:none;
}
}
//Este css detecta la resolución de la pantalla cuando tiene un ancho minimo de 600px, con esta sentencia css se oculta el div que contiene las redes sociales, que forman parte del footer móvil.
@media screen and (min-width: 600px){
.redes{
display:none;
}
}
</style>
Espero le pueda ser de utilidad a alguien.
Media querys utiles, principalmente los de iPad ya que casi siempre hay que hacer retoques por css para estos dispositivos.
CSS3: Listado de Media Queries para dispositivos móviles (tomado de bufa.es)
/* Smartphones (portrait & landscape) */
@media
only
screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* Smartphones (landscape) */
@media
only
screen
and (min-width : 321px) {
}
/* Smartphones (portrait) */
@media
only
screen
and (max-width : 320px) {
}
/* iPads (portrait & landscape) */
@media
only
screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* iPads (landscape) */
@media
only
screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* iPads (portrait) */
@media
only
screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* Ordenadores de sobremesa y portátiles */
@media
only
screen
and (min-width : 1224px) {
}
/* Pantallas grandes */
@media
only
screen
and (min-width : 1824px) {
}
/* iPhone 4 */
@media
only
screen and (-webkit-min-device-pixel-ratio : 1.5),
only
screen and (min-device-pixel-ratio : 1.5) {
}
Saludos