Я работаю со страницей продукта и в настоящее время пытаюсь сделать ее отзывчивой. У меня есть кнопка-оболочка, которая отображается при посещении сайта с помощью мобильного устройства. Эта обертка похожа на на сайте Hermes (также переключается на мобильный), где кнопка «Купить» имеет фиксированную позицию.
Это css:
@media screen and (max-width:640px){
*{
max-width: 100%;
}
(...)
.button-wrapper{
transform: translateY(0);
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
align-items: baseline;
justify-items: center;
padding: 2rem;
z-index: 99;
bottom: 0;
left: 0;
right: 0;
justify-content: center;
align-content: center;
position: fixed;
width: 100%;
max-width: 100%;
background-color: #f4f5fc;
}
Каким-то образом контейнер больше ширины устройства, что оставляет действительно неудобное пространство. Вот что я имею в виду:
Другая проблема заключается в том, что начальная позиция оболочки находится ниже высоты экрана. Фотография сверху не обрезана, и, как вы можете видеть, кнопка находится на полпути. Но когда я прокручиваю вниз, это происходит:
Теперь можно увидеть всю оболочку.
Любая помощь приветствуется! Заранее спасибо.
РЕДАКТИРОВАТЬ: Это HTML:
<body>
{% include 'loader.html' %}
<header>
<div class="d-flex justify-content-center">
<div class="row">
<div class="responsive-logo"></div>
<div class="pullcontainer">
<a href="#" id="pull"><i class="fa fa-bars fa-2x"></i></a>
</div>
</div>
<div class="row">
<div class="align-items-center justify-content-center">
<nav>
<div class="logo-holder"></div>
<ul class="clearfix">
<li><a href="{% url 'index' %}">Home</a></li>
<li class="dot">.</li>
<li><a href="{{ Anthony.go_to_product_page }}" class="r_spacer">Anthony</a></li>
<li><a href="{{ Jackson.go_to_product_page }}">Jackson</a></li>
<li class="dot">.</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class="hero"></div>
</header>
<div class="container">
<div class="d-flex justify-content-center">
<div class="col-sm">
<div class="product-gallery">
<div class="product-image">
<img class="active" src="{{ object.main_image.url }}">
</div>
<ul class="image-list">
<li class="image-item"><img src="{{ object.main_image.url }}"></li>
<li class="image-item"><img src="{{ object.other_image_1.url }}"></li>
<li class="image-item"><img src="{{ object.other_image_2.url }}"></li>
</ul>
</div>
</div>
<div class="col">
<div class="container-fluid">
<h1>{{ object.title }}</h1>
<div class="row ml-0.5">
<h1 class="prev-price">${{ object.previous_price }}</h1>
</div>
<div class="row">
<h1 class="actual-price">${{ object.actual_price }}</h1>
</div>
</div>
<div class="container-fluid">
<div class="row">
<p>127x180cm leather bag</p>
</div>
<div class="row">
<p>Free shipping worldwide</p>
</div>
<div class="row">
{% for message in messages %}
<h1>{{message}}</h1>
{% endfor %}
<form method="POST">
{% csrf_token %}
{{ form|crispy }}
<div class="button-wrapper">
<button class="buy-btn mt-4" type="submit">Buy</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
{% include 'footer.html' %}
<script>
(some scripts)
</script>
</body>