Question

此链接显示我的问题http://www.rosstheexplorer.com/comparisons-between-australia-and-europe/。我不希望这个小部件说出“Ross The Exp ...＆＃39;我想要它说'罗斯探险家＆＃39;。我也希望能够看到“分享＆＃39;按钮。

此问题仅发生在大屏幕设备上。我尝试通过改变插件的高度和宽度来解决问题，但这并没有解决我的问题。我设法让它展示了罗斯探索者＆＃39;但我失去了分享＃39;通过这样做的按钮。

我与该插件的开发者交谈，他说Facebook控制小部件的字体大小，这意味着我不能简单地减少文本的字体大小。

我查看了CSS代码中的媒体查询，并找到了大型设备的以下内容

@media screen and (min-width: 50em) {


    .content-area {
        float: left;
        width: 100%;
        margin: 0 -30% 0 0;
    }

    .site-main {
        margin: 0 30% 0 0;
    }

    .site-content .widget-area {
        float: right;
        overflow: hidden;
        width: 25%;
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

然后我使用Internet Explorer Develop Tools来检查我的代码。我将小部件区域的宽度增加到28％。我认为这会扩大小部件而不会打扰页面上的其他内容。看起来我的计划几乎奏效了，“分享”这个事实。按钮仍然没有出现在小部件上确实给了我一些疑虑。

我去了我的CSS文件并进行了更改。

然后我重新加载了我的单词印刷页面，看起来宽度仍然是25％。我使用了开发人员工具，确认宽度仍为25％。在CSS文件中，它说宽度现在是28％。有人可以澄清为什么会发生或可能发生此错误？

谢谢

Answer 1

似乎你可能对屏幕上可见的字符数量设置了一些限制。检查是否存在某些限制你正在渲染'Ross The Exp ...'。除此之外，试试这个

/* Media Queries */
 @media screen and (min-width: 75em) {
  .site {
    max-width: 1153px;
    margin: 0px 0px 0px 0px;
    padding: 54px 108px;
    }
   }

还为窗口小部件提供父div，使窗口小部件响应为

<div class="col-md-12 col-sm-12"></div>

Answer 2

/* Media Queries */
@media screen and (min-width: 75em) {
    .site {
        max-width: 1153px;
        margin: 54px auto;
        padding: 54px 108px;


    }

.site-content .widget-area {

         1dro._1drp {
            font-side:16px
         }
}

在aove

中添加上述样式以代替您提到的样式

Answer 3

我与插件开发者交谈，他说Facebook控制小部件的字体大小。我现在用新的详细信息/屏幕截图更新了我的问题。

Answer 4

我能够通过清除缓存并选择不同的FB插件来解决问题。

感谢大家的帮助

增加小部件的大小

4 个答案: