Изотопные проблемы с макетом

Question

Я работаю на этом сайте:

http://www.thecarlossanchez.com/Test/thecarlossanchez/Galleries/stilltest.html

Когда я создавал эскизы все работало замечательно, но по какой-то причине он добавил все это дополнительное пространство, если вы прокручиваетесь вправо. Все работало так, как должно было быть в окне, и это никогда не заставляло меня прокручивать вправо, поэтому я проигнорировал дополнительное пространство.

Теперь я добавляю изотоп для фильтрации содержимого, но когда выбрана категория, все миниатюры выпадают вниз и вправо. Что-то сосредоточивает контент на всем этом дополнительном пространстве. И я недостаточно знаком с jquery, чтобы понять, в чем проблема.

Вот пример того, как он должен работать без изотопа:

http://www.thecarlossanchez.com/Galleries/people.html

Любые идеи о том, как это исправить?

Answer 1

При проверке на вашем сайте я заметил, что у вас есть огромный размер , установленный на вашем gallery элементах.

В настоящее время это:

.gallery{ 
    width:80%; 
    padding:800px; /* enormous padding */ 
    position:relative; 
} 

Я изменил, что padding: 0; и дополнительное пространство на правой стороне удаляется.

.gallery должен выглядеть, как это сейчас:

.gallery{ 
    width:80%; 
    padding:0; 
    position:relative; 
} 

Кроме того, если вы хотите, чтобы центрировать свою галерею, когда страница изменяется, добавьте margin: 0 auto к .gallery элементу.

например.

.gallery{ 
    width:80%; 
    padding:0; 
    position:relative; 
    margin: 0 auto; /* center gallery */ 
}