У меня здесь довольно странная ситуация.У меня есть этот HTML:
<!DOCTYPE html>
<html>
<head>
<title>Notes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
test1
</p>
<a href="/notes/pin/1" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>testtt</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/1/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/1/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/4" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>- test</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/4/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/4/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
</div>
<div style="padding-top:50px;"></div>
<!--- NON-PINNED -->
<div class="columns is-multiline">
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Note test
</p>
<a href="/notes/pin/2" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Testi</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/2/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/2/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Dhchjc
</p>
<a href="/notes/pin/3" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Djfjgn<br>- eat ?</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/3/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/3/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<div class="column is-one-third">
<div class="card">
<header class="card-header">
<p class="card-header-title">
Fhfj
</p>
<a href="/notes/pin/5" class="card-header-icon" aria-label="more options">
<span class="icon">
<i class="fas fa-thumbtack" style="color:lightgrey;" aria-hidden="true"></i>
</span>
</a>
</header>
<div class="card-content">
<div class="content">
<p>Brjdjc</p>
</div>
</div>
<footer class="card-footer">
<a href="/notes/edit/5/" class="card-footer-item">Edit/View</a>
<a href="/notes/delete/5/" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
</div>
<a href="/notes/new/">
<div id="floating-button" data-toggle="tooltip" data-placement="left" data-original-title="Create">
<p class="plus">+</p>
</div>
</a>
</body>
</html>
И мой CSS:
#floating-button {
width: 55px;
height: 55px;
border-radius: 50%;
background: #db4437;
position: fixed;
bottom: 30px;
right: 30px;
cursor: pointer;
box-shadow: 0px 2px 5px #666;
}
.plus {
color: white;
position: absolute;
top: 0;
display: block;
bottom: 0;
left: 0;
right: 0;
text-align: center;
padding: 0;
margin: 0;
line-height: 55px;
font-size: 38px;
font-family: 'Roboto';
font-weight: 300;
}
.column {
margin-top: 10px;
}
.card {
margin-left: 10px;
margin-right: 10px;
max-height: 500px;
}
- При просмотре в обычном режиме рабочего стола все в порядке.
- Когда на Chrome+ мобильный видовой экран, на оси х есть небольшое переполнение.
- При просмотре в мобильном окне просмотра Firefox + это нормально.
- При удалении тега
script, импортирующем Font-Awesome, больше нет проблем в Chrome.Причиной этого является шрифт CSS-шрифтов.
Есть два columns, потому что один предназначен для закрепленных заметок (отображается первым), а другой для обычных.
Проблема
При работе в Chrome с мобильным окном просмотра ширина страницы больше, чем у окна просмотра, но не в Firefox.Я исправил это, удалив тег script, импортирующий Font-Awesome, но мне понадобится шрифт awesome и его значки.