Офсет на мобильном Safari из-за нижнего меню - PullRequest
Новая
       24

Офсет на мобильном Safari из-за нижнего меню

0 голосов
/ 01 мая 2019

У меня есть квадрат на моем сайте, вертикально и горизонтально по центру. Это работает нормально, если я тестирую это в небольших разрешениях на моем рабочем столе. Но если я открою его в Safari на мобильном устройстве (Ihpone 5S), из-за нижнего меню появится небольшое смещение к вершине квадрата. Есть ли способ исправить это? 

    <div id="content" class="site-content">
        <div class="container-fluid">
            <div class="row">

    <section id="primary" class="content-area col-12">
        <main id="main" class="site-main
        product
        " role="main">


<div class="project_square"></div>

<article id="post-508" class="post-508 post type-post status-publish format-standard has-post-thumbnail hentry category-product category-projecten">

    <div class="row no-gutters project_top">
        <h1 class="entry-title">Daily Gems</h1>

            <div class="layout_img project_center">
                                    <img src="www.imgurl.com" alt="" />
                            </div>



    </div>

main
{
  display: block;
}
.project_square
{
  position: fixed;
  width: 37.5vw;
  height: 37.5vw;
  background: #fff;
  left: 31.25vw;
  z-index: 101;
  top: 48%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

Квадрат должен быть вертикально центрирован позади следующего. И не плавать над текстом (как на скриншоте мобильного).

Safari Mobile Настольный браузер

...