在横向移动视图中右侧有多余的空白/填充
以下是该问题的屏幕截图：
如您所见，页面右侧有额外的不需要的空格。
出于某种原因，我的Android手机不会与我的PC配合，因此我无法进行远程调试以查看导致故障的元素。
我通过反复试验将其缩小，并且只要页面上有“事件详细信息”对象，就会发生这种情况。
如果您在移动设备上转到https://merkd.com/events/history并以横向方式使用它，您会注意到您可以向右滚动并查看额外的空白区域。
我认为这是一个填充问题，但我查看了相关的CSS文件（https://merkd.com/engine/ui/themes/lux/assets/css/style.events.css）但没有突出显示。
是否有人能够看到导致此问题的元素？
使用Chrome运行Galaxy S5
有人指出，我应该添加HTML，以防链接变得无效。以下是“活动详细信息”部分的HTML：
<div class="middle_events">
<div class="container gray">
<!--<div class="history">
<div class="row">
<div class="col-sm-6 col-md-6 col-xs-12"><a href="#">Event History</a></div>
<div class="col-sm-6 col-md-6 col-xs-12 right"><a href="#">View All</a></div>
</div>
</div>-->
<!-- <div class="recent_event">
<div class="row">
<div class="col-sm-12 col-md-12 col-xs-12"><p>No upcoming events to display. <a href="#">View past events?</a></p></div>
</div>
</div>-->
</div>
<!--
<div class="title-area" style="margin-top: 4em;">
<h2 class="title">Featured Event</h2>
<span class="line"></span>
<p>We let you know which Events & Petitions are most popular.</p>
</div>
-->
<div class="container gr">
<div class="highlight">
<h1>Event Spotlight</h1>
</div>
</div>
<div class="high_inner">
<div class="container wht">
<div class="row pd">
<div style="float: left; padding-left: 1em;"><a href="/events/add-filter(4,game)">Similar events</a></div>
<div style="float: right; padding-right: 1em;"><a href="/events/4/XOK-vs-LSK-Rematch">More details</a></div>
</div>
<div class="games_all">
<div class="row" id="event4">
<div class="col-sm-4 col-md-4 col-xs-12">
<a href="#"><img src="/usr/events/thumb.php?src=gtav.jpg&w=600" title="XOK vs LSK Rematch" alt="XOK vs LSK Rematch" class="img-responsive" /></a>
</div>
<div class="col-sm-8 col-md-8 col-xs-12">
<div class="games_all_inner">
<div class="row">
<div class="col-sm-10 col-md-10 col-xs-9 event-details-event-title">
<a href="/events/4/XOK-vs-LSK-Rematch">XOK vs LSK Rematch</a>
</div>
<div class="col-sm-2 col-md-2 col-xs-3">
<a href="/events/4/XOK-vs-LSK-Rematch/like" class="like event-details-like-link-container">Unlike</a>
</div>
</div>
<hr class="my_hr">
<div class="row">
<div class="col-sm-12 col-md-12 col-xs-12">
<p class="game_name">Call of Duty: Black Ops II</p>
<h3 class="datntime">July 27, 2015 <span class="normal event-details-start-time">Started at 7:26am</span></h3>
<div class="res">
<div class="odd">Odds are locked</div>
<div class="cntest center">
<h4>5:2</h4>
<h4>ExtraordinaryKillers : Los Santos Kings </h4>
<a href="#">More details</a>
</div>
</div>
<div class="bet">
<div class="row">
<div class="col-sm-9 col-md-9 col-xs-12 event-details-pot-container">
<h3>Total Pot:<span> <i class="fa fa-usd"></i>10,450</span></h3>
</div>
<div class="event-details-bet-button-container">
<button>Place your bet!</button>
<!-- <p class="like_thumb">+3<i class="fa fa-thumbs-o-up"></i></p> -->
</div>
</div>
</div>
</div>
<div class="eventLikesContainer" id="event4LikesCollapsed">
<a href="javascript:expandLikes('event', 4);" style="display: block; float: right; font-size: 1em; color: #006600;">
4 people like this
</a>
</div>
<div class="eventLikesContainer eventLikesExpanded" id="event4LikesExpanded"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="container">
<div class="right-tabs clearfix">
<ul class="nav nav-tabs">
<div class="pro_title">
<div class="img_pro"><img src="/engine/ui/themes/lux/assets/images/performance.png" /></div>
<h1>Performance Reports</h1>
</div>
<li class=""><a aria-expanded="false" data-toggle="tab" href="#tab_c">Reviews</a></li>
<li class=""><a aria-expanded="false" data-toggle="tab" href="#tab_b">Stats</a></li>
<li class="active"><a aria-expanded="true" data-toggle="tab" href="#tab_a">Events</a></li>
</ul>
<div class="tab-content">
<div id="tab_a" class="tab-pane active">
<div class="row center">
<div class="event-details-participant-container">
<div class="player_win">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="outcome win" style="display: block;">Winner</div>
<img class="img-responsive" src="/usr/teams/icons/thumb.php?src=1441676463.1.jpg&w=150">
<div class="details_all">
<a href="/teams/ExtraordinaryKillers">
<p>ExtraordinaryKillers</p>
</a>
<span class="winloss win">W</span>
<span class="winloss win">W</span>
</div>
<div class="clearfix"></div>
<div class="vs">
<div class="vs_1">
<a href="/events/3/XOK-vs-LSK-Rematch">1. XOK vs LSK Rematch</a>
</div>
<div class="vs_2">
<span class="winloss win">W</span>
</div>
</div>
<div class="vs">
<div class="vs_1">
<a href="/events/1/ExtraordinaryKillers-vs-LS-Kings">2. ExtraordinaryKillers vs. LS Kings</a>
</div>
<div class="vs_2">
<span class="winloss win">W</span>
</div>
</div>
<div class="vs_bottom">
<h2>Roster</h2>
<div class="vs_botttom_inner">
<a href="/u/Dan">1. danL</a>
<a href="/u/Dan">2. Pilot-Doofy</a>
<a href="/u/Dan">3. mardanlin</a>
<a href="/u/Dan">4. mardanlin</a>
</div>
</div>
</div>
</div>
</div>
<div class="center middle_vs">
<h1>V/S</h1>
</div>
<div class="event-details-participant-container">
<div class="player_lost">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="outcome loss" style="display: block;">Loser</div>
<img class="img-responsive" src="/usr/teams/icons/thumb.php?src=default.png&w=150">
<div class="details_all">
<a href="/teams/LosSantosKings">
<p>Los Santos Kings</p>
</a>
<span class="winloss loss">L</span>
<span class="winloss loss">L</span>
</div>
<div class="clearfix"></div>
<div class="vs">
<div class="vs_1">
<a href="/events/3/XOK-vs-LSK-Rematch">1. XOK vs LSK Rematch</a>
</div>
<div class="vs_2">
<span class="winloss loss">L</span>
</div>
</div>
<div class="vs">
<div class="vs_1">
<a href="/events/1/ExtraordinaryKillers-vs-LS-Kings">2. ExtraordinaryKillers vs. LS Kings</a>
</div>
<div class="vs_2">
<span class="winloss loss">L</span>
</div>
</div>
<div class="vs_bottom">
<h2>Roster</h2>
<div class="vs_botttom_inner">
<a href="/u/Ewan">1. xEwesey</a>
<a href="/u/Ewan">2. Ewesey</a>
<a href="/u/Ewan">3. Ewesey</a>
<a href="/u/Dan">4. DanLindsey</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tab_b" class="tab-pane">
<h2 style="color: black;">Coming soon</h2>
</div>
<div id="tab_c" class="tab-pane">
<h2 style="color: black;">Coming soon</h2>
</div>
</div>
<!-- tab content -->
</div>
<!-- end right-tabs -->
</div>
<!-- end of container -->
</div>
</div>
</div>
</div>
这是CSS文件内容
.event-details-participant-container {
width: 43%;
min-width: 350px;
display: inline-block;
text-align: left;
}
.event-details-like-link-container {
float: right; margin-right: -2em;
}
.eventLikesContainer {
float: right;
padding-right: 3em;
text-align: right;
}
.eventLikesContainer a {
display: inline !important;
font-size: 1em !important;
}
.eventLikesExpanded {
padding: 1em 3em 0 0;
text-align: right;
}
.news .highlight {
padding-bottom: 15px;
padding-top: 15px;
}
.news_inner {
background: #fff none repeat scroll 0 0;
box-shadow: 2px 2px 5px #d3d3d3;
}
.img_news {
border: 4px solid gray;
}
.img_news > img {
width: 100%;
}
.img_news > p {
background: gray none repeat scroll 0 0;
color: #fff;
font-size: 20px;
margin: 0;
padding: 5px 0;
text-align: center;
}
.news_inner span {
float: right;
padding-right: 15px;
padding-top: 15px;
}
.update > p {
padding-top: 6px;
}
.highlight h1 {
background: #2f9c2b none repeat scroll 0 0;
color: #fff;
font-size: 24px;
margin: 0;
padding-bottom: 15px;
padding-left: 15px;
padding-top: 15px;
}
.wht {
background: #fff none repeat scroll 0 0;
}
.pd {
border-bottom: 1px solid #cdcdcd;
padding: 15px 0;
}
.games_all {
padding: 25px 0;
}
.high_inner a {
padding: 0;
}
.high_inner a {
display: inline-block;
font-size: 17px;
padding-top: 15px;
width: 100%;
}
.container.wht a img {
padding-top: 15px;
}
.games_all_inner a {
font-size: 40px;
font-weight: 700;
}
.like {
font-size: 15px !important;
font-weight: normal !important;
padding-top: 29px !important;
}
.my_hr {
margin: 0;
}
.game_name {
font-size: 25px;
font-weight: 600;
}
.datntime {
font-weight: bold;
margin: 0;
}
.normal {
font-size: 22px;
font-weight: normal;
margin-left: 10px;
vertical-align: top;
}
.res {
width: 100%;
max-width: 650px;
margin: 0 auto;
}
.odd {
text-align: right;
}
.center {
text-align: center !important;
}
.cntest {
background: #eee;
display: inline-block;
padding: 8px;
position: relative;
width: 100%;
}
.cntest > h4 {
line-height: 26px;
margin: 0;
}
.cntest > h4:first-of-type {
font-size: 30px;
}
.cntest.center > a {
font-size: 12px;
font-weight: normal;
padding: 0 10px 0 0;
text-align: right;
float: right;
max-width:100px;
}
.bet h3 {
font-weight: bold;
font-size: 28px;
}
.bet h3 span {
color: #2F9C2B;
}
.high_inner button {
background: #2f9c2b none repeat scroll 0 0;
border: medium none;
border-radius: 3px;
color: #fff;
margin: 15px 0;
padding: 11px;
}
/*
.high_inner button:hover {
background: blue none repeat scroll 0 0;
}
*/
.like_thumb {
font-size: 17px;
margin: 0;
}
.fa.fa-thumbs-o-up {
margin-left: 7px;
}
.right-tabs.clearfix {
padding-top: 20px;
}
.pro_title {
padding: 0;
margin: 0 0 -40px 0;
vertical-align: middle;
max-height: 80px;
}
.img_pro {
vertical-align: middle;
display: inline-block;
padding: 0; margin: 0;
}
.img_pro img {
width: 58px;
height: 58px;
}
.pro_title h1 {
vertical-align: middle;
display: inline-block;
font-size: 38px;
margin: 0;
padding: 2px 0 0 0.3em;
max-width: 80%;
text-align: left;
width: 100%;
}
.nav-tabs > li {
float: right !important;
margin-bottom: -1px;
}
.nav-tabs > li:first-of-type {
margin-right: 2em;
}
.nav-tabs > li > a {
font-family: "Asap",sans-serif !important;
font-weight: 600;
text-transform: uppercase;
}
.nav-tabs > li > a {
padding: 0.7em 1.8em;
}
.player_win {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
margin-top: 20px;
padding: 10px;
width: 100%;
}
.player_win img {
display: block;
float: left;
margin-right: 15px;
max-width: 50px;
}
.details_all {
float: left;
}
.details_all > a {
padding: 0;
display: block;
}
.player_win p {
display: block;
font-size: 19px;
margin: 0;
padding: 0;
width: 100%;
}
.player_win span {
background: #2f9c2b none repeat scroll 0 0;
border-radius: 5px;
color: #fff;
display: inline-block;
font-size: 16px;
padding: 0 7px;
}
.vs {
background: #dcf4f9 none repeat scroll 0 0;
border: 1px solid #aaa;
border-radius: 3px;
display: inline-block;
margin: 5px 0 0 0;
padding: 5px;
width: 100%;
}
.vs_1 {
float: left;
}
.vs_1 > a {
font-size: 15px;
padding: 0;
color: #000;
}
.vs_2 {
float: right;
}
.vs_bottom h2 {
padding: 0;
font-size: 24px;
color: #444444;
}
.vs_botttom_inner > a {
padding: 5px 0;
}
.vs_bottom span {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
color: #E43E43;
font-size: 23px;
margin-top: -4px;
font-weight: 800;
}
.middle_vs h1 {
text-align: center;
font-size: 47px;
font-weight: 800;
}
.middle_vs {
display: inline-block;
vertical-align: top;
padding-top: 3em;
width: 12%;
}
.player_lost {
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
display: inline-block;
margin-top: 20px;
padding: 10px;
width: 100%;
}
.player_lost img {
display: block;
float: left;
margin-right: 15px;
max-width: 50px;
}
.player_lost p {
display: block;
font-size: 19px;
margin: 0;
padding: 0;
width: 100%;
}
.outcome {
padding: 0.35em;
font-size: 1.1em;
color: white;
text-align: center;
margin-bottom: 0.5em;
}
.winloss {
color: white;
border-radius: 5px;
display: inline-block;
font-size: 16px;
padding: 0 7px;
}
.win {
background: #2F9C2B !important;
}
.loss {
background: #E43E43 !important;
}
.tie {
background: #1B70BB;
}
.player_vs {
border-bottom: 1px solid #CDCDCD;
border-top: 1px solid #CDCDCD;
font-size: 19px !important;
padding: 5px 0;
}
.player_vs_name {
color: #2F9C2B;
padding-bottom: 0 !important;
padding-top: 5px !important;
}
.player_vs_name span {
color: #E43E43;
background: none;
font-weight: 600;
}
.player_lost_name {
margin: 0 !important;
padding: 0 !important;
}
.gr {
background: #2f9c2b none repeat scroll 0 0;
}
.highlight h1 {
background: #2f9c2b none repeat scroll 0 0;
color: #fff;
font-size: 24px;
margin: 0;
padding-bottom: 15px;
padding-left: 15px;
padding-top: 15px;
}
.event-platform-icon {
position: absolute;
bottom: 10px;
right: 20px;
}
.event-platform-icon img {
width: 55px;
height: 55px;
}
.event-filter-container, .event-sort-container {
padding-top: 2em;
display: inline-block;
width: 49%;
}
.event-sort-container {
text-align: right;
}
.event-filter-container span, .event-sort-container span {
font-size: 24px;
}
#event-index-game-filter-select {
display: inline !important;
float: none !important;
}
.event-filter-container select, .event-sort-container select {
padding: 0.25em 0.75em;
background: #dcf4f9;
margin-left: 1em;
}
.event-filter-tags-container, .event-index-view-types-container {
padding: 1em;
}
.event-filter-tag {
float: left; padding: 4px 8px; border-radius: 5px; background-color: #FFEE88; margin: 0 5px 5px 0; border: 1px solid #777777;
}
.event-filter-tag a {
font-weight: 600; color: #FF0000;
border-radius: 4px;
margin: 3px 0 0 10px;
padding: 0 0.375em 0 0.35em;
background: #ccc;
}
.event-index-view-types-container {
text-align: right;
margin: 1.5em 0 0.75em 0;
}
.event-index-view-type {
padding: 0.75em 0;
cursor: pointer;
border-bottom: 2px solid #fff;
}
.event-index-view-type:first-of-type {
margin-right: 1.5em;
}
.event-index-view-type.active, .event-index-view-type:hover {
border-color: #009136;
}
.event-index-view-types-container .event-index-view-type img {
display: inline-block;
width: 20px;
height: 20px;
}
.event-index-view-types-container .event-index-view-type span {
display: inline-block;
vertical-align: middle;
margin-left: 8px;
}
.event-index-list {
clear: both;
width: 100%;
}
.event-index-list li {
border-bottom: 1px solid #aaa;
padding: 1em 0;
overflow: hidden;
vertical-align: middle;
cursor: pointer;
}
.event-index-list li:hover {
background: #dedede;
}
.event-index-list li.active {
background: #FFF5BD;
}
.event-index-list li:first-of-type:hover {
background: none;
}
.event-index-list li span {
display: inline-block;
text-align: center;
}
.event-index-list li .event-index-list-item-position {
width: 5%;
vertical-align: middle;
}
.event-index-list li .event-index-list-item-participants {
vertical-align: middle;
text-align: left;
width: 35%;
}
.event-index-list li .event-index-list-item-game {
vertical-align: middle;
width: 23%;
}
.event-index-list li .event-index-list-item-platform {
vertical-align: middle;
width: 20%;
}
.event-index-list li .event-index-list-item-prize {
vertical-align: middle;
width: 15%;
}
@media (max-width: 995px) {
.event-filter-container, .event-sort-container {
display: block;
width: 100%;
}
.event-filter-container {
clear: both;
}
}
@media (max-width: 995px) {
.event-index-list li .event-index-list-item-position {
width: 5%;
}
.event-index-list li .event-index-list-item-participants {
text-align: left;
width: 38%;
}
.event-index-list li .event-index-list-item-game {
width: 23%;
}
.event-index-list li .event-index-list-item-platform {
width: 15%;
}
.event-index-list li .event-index-list-item-prize {
width: 15%;
}
}
@media (max-width: 740px) {
.event-index-list li .event-index-list-item-position {
width: 5%;
}
.event-index-list li .event-index-list-item-participants {
text-align: left;
width: 45%;
}
.event-index-list li .event-index-list-item-game {
width: 28%;
}
.event-index-list li .event-index-list-item-platform {
display: none;
}
.event-index-list li .event-index-list-item-prize {
width: 15%;
}
}
@media (max-width: 625px) {
.event-index-list li .event-index-list-item-position {
width: 10%;
}
.event-index-list li .event-index-list-item-participants {
text-align: left;
width: 63%;
}
.event-index-list li .event-index-list-item-game {
display: none;
}
.event-index-list li .event-index-list-item-platform {
display: none;
}
.event-index-list li .event-index-list-item-prize {
width: 22%;
}
}
@media(max-width:450px) {
.event-filter-container span {
display: block;
}
.event-filter-container select {
margin-top: 10px;
}
}
@media(max-width:410px) {
.pro_title h1 {
font-size: 25px;
}
.img_pro img {
width: 40px;
height: 40px;
}
.nav-tabs > li:first-of-type {
margin-right: 0;
}
.event-details-like-link-container {
margin-right: -1em;
}
}
@media(max-width:390px) {
.event-details-start-time {
display: block; width: 100%;
padding: 0.35em 0 0 0;
}
}
@media(max-width:380px) {
.pro_title h1 {
font-size: 25px;
}
.img_pro img {
width: 40px;
height: 40px;
}
.nav-tabs > li > a {
padding: 0.4em 0.75em;
}
}
@media(max-width:380px) {
.pro_title h1 {
font-size: 22px;
}
.img_pro img {
width: 35px;
height: 35px;
}
}
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？