共享按钮在移动设备上导致样式错误

Question

我有以下代码：

<div class="social-share"> 
<span class="st_facebook_large"></span> 
<span class="st_twitter_large"></span> 
<span class="st_email_large"></span> 
<span class="st_sharethis_large"></span> 
<span class="st_plusone_button_large"></span> 
</div>

有了这个CSS:

.social-share {
position:absolute;
z-index:0 !important;
}
.image {
position:absolute;
z-index:2;  
}

上面的 CSS 是自定义的，因此共享按钮旁边的图像不会干扰它们。

在移动设备上导致此样式错误：

我正在考虑做这样的事情，但它不起作用：

@media screen and (max-width: 768px) {
  .social-share {
     margin-bottom: 17px;
  }
}

URL to the scenario

问：如何解决移动设备上的样式错误？

Answer 1

将 Position:relative 赋给包含 class="social-share"

的 div

Answer 2

您的问题是使用 "position: absolute;" 导致边距不起作用。您需要将其更改为 "position: relative;" 并且您会看到边距正常工作。无需针对此特定问题进行媒体查询。

共享按钮在移动设备上导致样式错误

Share-buttons causing styling error on mobile device

html

css

wordpress