Hola a todos, os agradezco por anticipado por vuestra ayuda.
He decidido crear mi portafolio y me he encontrado con un par de problemas que llevo una semana sin poder resolver.
He aplicado el framework Bootstrap y añadido la librería Masonry, funciona bien, pero cuando actualizo la página online, las imágenes se cortan y no respeta el alto que deberían de tener, pero cuando reduzco la ventana del navegador y la rejilla reorganiza las imágenes y vuelvo a colocar la ventana al tamaño máximo, todo vuelve a estar perfecto, esto hasta que se vuelve a actualizar o refrescar la web.
He buscado las respuesta en el foro, pero las que he visto, no me han ayudado a resolver el fallo que tengo en mi web.
Esta es la web que esta en proceso de diseño: www.paulmarquez.com
Este es es el código HTML:
<!DOCTYPE html>
<html>
<head>
<title>Paul Marquez Arica</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800 ,900">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- /// Inicio Logo y Navegación /// -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Desplegar navegación</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="image/pma_logomenu.png"></a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Proyectos</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Miscelanea</a></li>
<li><a href="#">Taller</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
</div>
</nav>
<!-- /// Fin Logo y Navegación /// -->
<!-- /// Inicio Portfolio /// -->
<div class="container primero">
<section>
<div class="row grid">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box">
<h3>Mistic Wine</h3>
<img class="proyectos img-responsive" src="image/proyectos/0001/vino01.png">
<p>Quisque volutpat lorem eget erat consectetur accumsan. Vivamus vel ultrices nisl</p>
<a href="#">Click here</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box">
<h3>This Corn</h3>
<img class="proyectos img-responsive" src="image/proyectos/0002/cereal.png">
<p>Quisque volutpat lorem eget erat </p>
<a href="#">Click here</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box">
<h3>Ibiza Boat Bay</h3>
<img class="proyectos img-responsive" src="image/proyectos/0003/ibiza_boat_bay.png">
<p>Quisque volutpat lorem eget erat vel ultrices nisl, ut vestibulum nunc. Quisque eget tortor vel justo...</p>
<a href="#">Click here</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box">
<h3>Bolo Juice</h3>
<img class="proyectos img-responsive" src="image/proyectos/0004/bolo_juice.png">
<p>Quisque volutpat lorem eget erat nunc. Quisque eget tortor vel justo...</p>
<a href="#">Click here</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box">
<h3>Granum<br>Honey</h3>
<img class="proyectos img-responsive" src="image/proyectos/0005/granum_honey.png">
<p>Quisque volutpat lorem eget erat vestibulum nunc. Quisque eget tortor vel justo...</p>
<a href="#">Click here</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box">
<h3>Mini Bite</h3>
<img class="proyectos img-responsive" src="image/proyectos/0006/mini_bite.png">
<p>Quisque volutpat lorem eget erat consectetur accumsan. Vivamus vel ultrices nisl, ut vestibulum nunc. Quisque eget tortor vel justo...</p>
<a href="#">Click here</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box">
<h3>Ibiza Residency</h3>
<img class="proyectos img-responsive" src="image/proyectos/0008/ibiza_residency_iso.png">
<p>Quisque volutpat lorem eget erat consectetur accumsan. Vivamus vel ultrices nisl, ut vestibulum nunc. Quisque eget tortor vel justo...</p>
<a href="#">Click here</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 box">
<h3>Always a Plan</h3>
<img class="proyectos img-responsive" src="image/proyectos/0007/always_a_plan.png">
<p>Quisque volutpat lorem eget erat consectetur accumsan. Vivamus vel ultrices nisl, ut vestibulum nunc. Quisque eget tortor vel justo...</p>
<a href="#">Click here</a>
</div>
</div>
</section>
</div>
<!-- /// Fin Portfolio /// -->
<!-- /// Inicio Boton Proyectos /// -->
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="circle">
<a href="#"><img src="image/arrow.png"></a>
</div>
</div>
</div>
</div>
<!-- /// Fin Boton Proyectos /// -->
<!-- /// Inicio Footer /// -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
Paul Marquez Arica © 2015 - All rights reserved
</p>
<nav>
<ul>
<li><a href="#">Proyectos</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Miscelanea</a></li>
<li><a href="#">Taller</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
</div>
</div>
</footer>
<!-- /// Fin Footer /// -->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/masonry.pkgd.js"></script>
<script>
$('.grid').masonry({
// options
itemSelector: '.box'
});
</script>
</body>
</html>
Este es mi código CSS:
body {
margin: 0;
padding: 0;
font-family: Raleway, Arial;
}
a {
color: #bcbcbc;
text-decoration: none;
}
p {
color: black;
font-size: 12px;
}
/*** Inicio de Header ***/
body header {
background-color: white;
}
section {
margin-top: 100px;
}
.navbar-default {
background-color: white;
border: none;
}
.navbar-toggle {
margin-top: 38px;
border-radius: 0px;
margin-right: 25px;
}
.navbar-nav {
padding-top: 20px;
padding-bottom: 20px;
margin-top: 10px;
text-align: center;
}
.navbar-default .navbar-nav li a {
color: #415355;
font-size: 16px;
line-height: 25px;
padding-left: 15px;
}
.navbar-default .navbar-nav li a:hover {
font-weight: 400;
color: red;
text-decoration: none;
}
.navbar-default .navbar-toggle {
margin-top:
}
.navbar-brand {
margin-top: 23px;
padding-left: 35px;
}
/*** Fin de Header ***/
/*** Inicio de Proyectos ***/
.box {
background: #ffffff;
margin-bottom: 10px;
}
.box:hover {
background: #f2f2f2;
}
.box h3 {
color: #415355;
font-size: 18px;
text-align: center;
margin: 20px;
font-weight: 600;
}
.box p {
margin: 20px;
text-align: center;
}
.box a {
color: #959595;
background-color: transparent;
text-align: center;
font-size: 12px;
font-weight: 700;
display: block;
margin-bottom: 20px;
}
.box a:hover {
color: red;
font-weight: 700;
text-decoration:none;
}
.circle img {
background: url(../image/arrow.png) no-repeat transparent;
margin-top: 25px;
}
.circle {
border-radius: 50%;
width: 60px;
height: 60px;
text-align: center;
background-color: gray;
margin: 10px auto;
}
.circle:hover {
background-color: red;
}
.proyectos {
margin: 0 auto;
}
/*** Fin de Proyectos ***/
/*** Inicio de Footer ***/
footer p {
float: left;
}
footer p {
color: #959595;
vertical-align: center;
background-color: transparent;
display: block;
overflow: hidden;
margin-top: 20px;
font-weight: 700;
}
footer nav {
float: right;
position: relative;
z-index: 99;
margin-top: 20px;
}
footer nav li {
float: left;
list-style: none;
}
footer nav li a {
color: #415355;
font-size: 12px;
padding-left: 23px;
}
footer nav li a:hover {
font-weight: 400;
color: red;
text-decoration: none;
}
/*** Fin de Footer ***/
/*** Inicio de Media Query ***/
@media screen and (max-width: 690px) {
footer p {
text-align: center;
float: none;
}
footer nav {
float: none;
}
footer nav li a {
padding-left: 8px;
}
footer nav ul {
text-align: center;
float: none;
margin: 0 auto;
}
}
/*** Fin de Media Query ***/
Estos son los scripts que he probado y no solucionan el problema
<script>
$('.grid').masonry({
// options
itemSelector: '.box'
});
</script>
<script>
$(document).ready(function() {
$('.grid').masonry({
// options
itemSelector: '.box'
});
});
</script>
<script>
$('.grid').imagesLoaded( function(){
$('.grid').masonry({
itemSelector: '.box',
});
});
</script>
<script>
$(window).load(function(){
alert('Window load');
});
$(document).ready(function(){
alert('Document ready');
});
</script>
Muchas gracias por la ayuda.
