Foundation Vertical XY Grid: контент 100vh и отзывчивый в grid-у - PullRequest
Новая
       6

Foundation Vertical XY Grid: контент 100vh и отзывчивый в grid-у

0 голосов
/ 01 февраля 2019

Использование FoundationPress для создания темы WordPress.На главной странице я хотел бы создать вертикальную сетку, используя grid-y medium-grid-frame вертикальную сетку Фонда, чтобы сохранить весь контент в области просмотра.Поэтому содержимое элемента <main> до , а не выходит за пределы footer.Изображения всегда будут реагировать на высоту области просмотра.Прямо сейчас это неправильно:

Снимок экрана с проблемой переполнения

Таким образом, нижний колонтитул всегда должен быть в нижней части области просмотра и без вертикальной прокрутки, с <main>контент хорошо вписывается внутри и реагирует на любой размер экрана.Если он не мобильный, то нижний колонтитул будет находиться внизу сложенных изображений.Кажется супер базовым.

Вот сайт, о котором идет речь https://comedydynamics.com, Я пытался копировать на CodePen, но это не получается.

Пытался вместо этого использовать x-grid, но не повезло.Возился с позицией CSS, переполнением, даже различными вариантами отображения.Действительно озадачен этим.

Код моей темы: 

<?php $post_objects = get_field('home_feat_posts');

    if ($post_objects): ?>

    <?php foreach ($post_objects as $post_object): ?>

        <a class="cell medium-6 large-offset-1 large-5 img-container" href="<?php echo get_permalink($post_object->ID); ?>">

            <?php

            $image = get_field('home_image', $post_object->ID);

            $size = 'fp-xlarge'; // (thumbnail, medium, large, full or custom size)

            if ($image) {
                echo wp_get_attachment_image($image, $size);
            }

            ?>

        </a>

    <?php endforeach; ?>

<?php endif; ?>

Вывод: 

<main class="grid-y">

    <div class="cell medium-auto medium-cell-block-container home-container">

        <div class="grid-x pt-2 pb-2">

            <a href="" class="cell medium-6 large-offset-1 large-5 img-container">

                <img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px">

            </a>

            <a href="" class="cell medium-6 large-offset-1 large-5 img-container">

                <img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px">

            </a>

            <a href="" class="cell medium-6 large-offset-1 large-5 img-container">

                <img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px">

            </a>

            <a href="" class="cell medium-6 large-offset-1 large-5 img-container">

                <img width="750" height="404" src="//localhost:3000/. . ." class="attachment-fp-xlarge size-fp-xlarge" alt=". . ." srcset="//localhost:3000/. . . 750w, //localhost:3000/. . . 300w, //localhost:3000/. . . 640w" sizes="(max-width: 639px) 98vw, (max-width: 1199px) 64vw, 750px">

            </a>

        </div>

    </div>

</main>

Может ли это быть связано с размером моего изображения в WordPress?

Надеюсь, я дал достаточно информации, ха-ха.

Спасибо!

См. Перо

Наша цель:

Что мы хотим.Нет переполнения основного контента

...