Чем это вызвано?
https://gfycat.com/SmugFelineGnatcatcher
Это используемый HTML-код.
РЕДАКТИРОВАТЬ: добавлен полный HTML
<div class='scommessa-con'>
<div class='nome-squadra'>
<p class='text orario' style='width:200px;margin-bottom:-16px;'>" . $row['DateTime'] . " </p>
<p class='text float-xl-left h4 pt-3' style='width: 350px;' id='nome-squadra'>" . $row['NomeSquadra'] . "</p>
</div>
<div class='quoteCon container'>
<div class='row flex-row flex-nowrap esito '>
<div class='text-center ' style='width: 59px;'>1</div>
<div class='text-center ' style='width: 59px;'>X</div>
<div class='text-center ' style='width: 59px;'>2</div>
<div class='text-center ' style='width: 59px;'>U2.5</div>
<div class='text-center ' style='width: 59px;'>O2.5</div>
<div class='text-center d-none d-sm-block' style='width:59px;'>GOL</div>
<div class='text-center d-none d-sm-block' style='width:59px;'>NO GOL</div>
<div class='text-center ' style='width:59px;'></div>
</div>
<div class='row flex-row flex-nowrap quota' id='" . $row['NomeSquadra'] . "'>
<div class='text-center border border-rounded-0 ' style='width: 59px;' id='1'>
". $row['1'] . "
</div>
<div class='text-center border align-middle' style='width: 59px;' id='X'>
" . $row['X'] . "
</div>
<div class='text-center border ' style='width: 59px;' id='2'>
" . $row['2'] . "
</div>
<div class='text-center border ' style='width: 59px;' id='U2.5'>
" . $row['U25'] . "
</div>
<div class='text-center border ' style='width: 59px;' id='O2.5'>
" . $row['O25'] . "
</div>
<div class='text-center border d-none d-sm-block' style='width:59px;' id='GOL'> " . $row['GOL'] . "</div>
<div class='text-center border d-none d-sm-block' style='width:59px;' id='NO GOL'> " . $row['NOGOL'] . "</div>
<div class='text-center border ' data-toggle='collapse' data-target='#quote" . $counter . "' id='more' style='width: 59px;'>MORE</div>
</div>
<div class='' style=''>
<div>
<div id='quote" . $counter . "' class='collapse-div collapse ' role='tablist'>
<div class='collapse-header mt-3 ' id='heading1'>
<button id='button' class='bottoni mb-2 btn-block ' data-toggle='collapse' data-target='#collapse1" . $counter . "' aria-expanded='true' aria-controls='collapse1'>
<i class='fas fa-chevron-down float-right' style='height: 15px'></i> <strong
class=' pl-2'>Under / Over </strong>
</button>
</div>
<div id='collapse1" . $counter . "' class='collapse scrolling-wrapper-flexbox pl-2 pr-2' role='tabpanel' aria-labelledby='heading1'>
<div class='collapse-body ml-1 '>
<div class='row flex-row flex-nowrap mt-2 esito '>
<div class='text-center border-left border-bottom' style='width: 59px;'>U0.5
</div>
<div class='text-center border-left border-bottom' style='width: 59px;'>U1.5
</div>
<div class='text-center border-left border-bottom' style='width: 59px;'>U3.5
</div>
<div class='text-center border-left border-bottom' style='width: 59px;'>O0.5
</div>
<div class='text-center border-left border-bottom' style='width: 59px;'>O1.5
</div>
<div class='text-center border-left border-bottom' style='width: 59px;'>O3.5
</div>
</div>
<div class='row flex-row flex-nowrap quota' id='". $row['NomeSquadra'] . "'>
<div class='text-center' style='width: 59px;' id='U0.5'>
" . $row['U05'] . "
</div>
<div class='text-center' style='width: 59px;' id='U1.5'>
" . $row['U15'] . "
</div>
<div class='text-center' style='width: 59px;' id='U3.5'>
" . $row['U35'] . "
</div>
<div class='text-center' style='width: 59px;' id='O0.5'>
" . $row['O05'] . "
</div>
<div class='text-center' style='width: 59px;' id='O1.5'>
" . $row['O15'] . "
</div>
<div class='text-center' style='width: 59px;' id='O3.5'>
" . $row['O35'] . "
</div>
</div>
</div>
</div>
Это единственный используемый CSS, если я не ошибаюсь, существуют другие классы, но в основном для взаимодействия с Javascript.
.bottoni {
border-style: solid !important;
border-width: 1px !important;
background-color: #e6e6e6 !important;
border-color: #b5b5b5;
text-align: left !important;
color:black;
}
#more {
background-color: black;
color: white;
font-size: 14x;
vertical-align: baseline;
}
.esito {
color: #9a9796;
font-size: 13px;
font-weight: 400;
}
.quota {
font-size: 15px;
color: black;
font-weight: 600;
cursor: pointer;
text-align: center;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
height: 26px;
}
@media (max-width: 576px) {
#tests {
text-align: center;
margin-left: 20%;
width: auto;
}
}
@media (min-width:1025px){
.orario{
padding-left:18px;
}
#nome-squadra{
margin-left:18px;
}
}
@media (min-width:577px) {
#button {
width: 100%;
text-align: center;
}
}
Я видел, что эта проблема возвращалась, когда я вносил некоторые изменения, а затем исчезал.Я полагаю, это может быть связано с шириной или высотой?Или проблема с отступом / полем?
Кстати, извините за грязный код, я довольно новичок в веб-разработке, всего 1-2 месяца