Точка останова для галереи изображений Wordpress - PullRequest
Новая
       36

Точка останова для галереи изображений Wordpress

0 голосов
/ 29 мая 2018

Я работаю над новым веб-дизайном, и я застрял в том, чтобы адаптировать свои изображения в определенных частях темы, искал и пробовал разные фрагменты кода в style.css и inline, но не смог получитьлюбые изображения изменены на моем телефоне и планшете.

Страница, о которой идет речь: http://zephyrusrecords.be/zephyrus/records/ Это обложки альбомов, которые я бы хотел уменьшить в размере на мобильном телефоне или планшете .... Надеюсь, это понятно, и я предоставил правильную информацию, еслине извините, и все равно заранее спасибо, застрял на этом какое-то время, поэтому было бы здорово, если бы кто-то мог помочь мне с этим ..

Всего наилучшего, Michiel

1 Ответ

0 голосов
/ 29 мая 2018

Вам нужно изменить CSS этих 3 элементов .table1 , ul.img-list li и img : 

.table1 {
        align-self: center;
        width: 850px; /*   Remove this line or change to width: auto;*/
        table-layout: fixed; 
}

ul.img-list li {
    display: inline-block;
    height: 200px; /*  Remove this line or change to height: auto; */
    margin: 0 1em 1em 0;
    position: relative;
    width: 200px; /*  Remove this line or change to width: auto; */ 
}

img {
    height: auto;
    max-width: 100%; /*  Remove this line */
    width: 100%; /*  add this line */
}

Я рекомендую вам добавить класс для ваших изображений, или вы можете использовать ". Table1 img" .

Изменения css автоматически адаптируют размер каждого окна изображения, когда вы уменьшаетеразмер страницы.

ОБНОВЛЕНИЕ:

Для части наведения необходимо изменить CSS элемента span.text-content: 

span.text-content {
    background: rgba(0,0,0,0.5);
    color: white;
    cursor: pointer;
    display: block;  /*  Change to block */
    height: 100%; /*  Change to 100% */
    left: 1px;
    position: absolute;
    top: 0;
    width: 100%; /*  Change to 100% */
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
}

ОБНОВЛЕНИЕ 2:

Если вы хотите центрировать текст, вам нужно снова изменить CSS элемента span.text-content: 

span.text-content {
    background: rgba(0,0,0,0.5);
    color: white;
    cursor: pointer;
    display: flex;  /*  Change to flex */
    height: 100%;
    left: 1px;
    position: absolute;
    top: 0;
    width: 100%;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    align-items: center; /*  add this line */
    justify-content: center; /*  add this line */
}
...