隐藏 Twitter 侧边栏

Question

我正在制作我的第一个网站，我必须要有一个侧边栏。所以我决定把 twitter 嵌入时间线。当我更改 window 的大小时，问题就开始了。我有响应式菜单，但 Twitter Embedded 时间轴总是与我的内容重叠。当我认为 window 太小时，我尝试分配最大高度或宽度。使用 display-none 说明段落旁边会有 void space，我不想就此解决。我也不喜欢我在互联网上找到的切换选项。你有什么建议？

body {
 margin: 0;
 padding: 0;
 font-family: sans-serif;
}


header {
 background-color: #000000;
 opacity: 0.9;
 width: 100%;
 padding: 40px 0; /* 40 hore a dole 0 po stranach */
 text-align: center;
 color: white;
}

a{
 text-decoration: none;
 color: inherit;
}

nav ul {
 background-color: #000000;
 overflow: hidden;
 color: white;
 padding: 0;
 text-align: center;
 margin: 0;
 opacity: 0.7;
 -webkit-transition: max-height 0.4s;
 -ms-transition: max-height 0.4s;
 -moz-transition: max-height 0.4s;
 -o-transition: max-height 0.4s;
 transition: max-height 0.4;
}

nav ul li {
 display: inline-block;
 padding: 20px;
}
nav ul li:hover{
 opacity: 0.75;
}

section {
 line-height: 1.5em;
 font-size: 0.9em;
 width: 75%;
 margin: 0 auto;
}
h1 {
 display: block;
 color: #000000;
    font-size: 10em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

.handle {
 width: 100%;
 color: white;
 background-color: #000000;
 opacity: 0.75;
 text-align: left;
 box-sizing: border-box; /*100 sirka a paddding by pretekala */
 padding: 15px 10px;
 cursor: pointer; 
 display: none;
}
i{
 float: right;
}

.uvitanie {
 background-color: #ffffff;
 margin: 10px 320px 10px 10px;
}
@media screen and (max-width: 700px) {
 nav ul {
  max-height: 0; /*lepsie ako nastavovanie vysky */
 }
 .showing {
  max-height: 20em;
 }
 nav ul li {
  width: 100%;
  box-sizing: border-box; /*100 sirka a paddding by pretekala */
  padding: 15px;
  text-align: center;
 }
 .handle{
  display: block;
 }

 .sidebar {
  
 }

}

.sidebar {
 margin: 10px;
 border-radius: 5px;
 padding: 15px;
 font-size: 100%;
 float: right;
 width: 350px;
}

h1 {
 display: block;
 text-align: center;
    font-size: 3.5em;
    margin-top: 0.67em;
    margin-bottom: 0.67em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}

h2 {
 display: block;
    font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 10px;
    margin-right: 0;
    font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
 <script>window.twttr = (function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0],
     t = window.twttr || {};
   if (d.getElementById(id)) return t;
   js = d.createElement(s);
   js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

   t._e = [];
   t.ready = function(f) {
     t._e.push(f);
   };
   return t; //script pre twitter
 }(document, "script", "twitter-wjs"));</script> 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <title>Svet Fruscianteho</title>
 <script src="https://use.fontawesome.com/c62e354f4b.js"></script>
 <link rel="stylesheet" type="text/css" href="css/design.css">
</head>
<body>
 <header>
   Svet Fruscianteho
 </header>
 <nav>
  <ul>
   <li><a href="index.html">Domov</a></li>
   <li><a href="albumy.html">Albumy</a></li>
   <li><a href="rhcp.html">RHCP</a></li>
   <li><a href="projekty.html">Projekty</a></li>
  </ul>
  <div class="handle">Menu
    <i class="fa fa-bars" aria-hidden="true"></i>
  </div>

 </nav>

 <aside class="sidebar">
  <p>
   <a class="twitter-timeline" data-width="350" data-height="500" data-theme="light" href="https://twitter.com/johnfrusciante">Tweets by johnfrusciante</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8">
    //samotny embedded timeline
   </script>
  </p>
 </aside>
 
 <section>
  <h1>Novinky</h1>
  <h2>John Frusciante strávil Vianoce s vdovou slávneho rockera.</h2>
  <p class="uvitanie">
   Text in foreign language and Instagram embedded photo.  
  </p>
 </section>

 <script>
 $(".handle").on( "click", function() {
            $("nav ul").toggleClass("showing");
        }); //script for the menu
 </script>

 
</body>
</html>

Answer 1

尝试将其放入您的 CSS 中，当您想要摆脱 Twitter 锚点时，您可能需要更改宽度。

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.twitter-timeline {
display:none;
}
  }

如果您不喜欢 void space，请为部分元素使用边距，放置一个 class，例如

<section class="section">
//section content
</section>

然后css那个方块

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.section  {
margin-top:-40px;
}
  }

或者你想要多少像素。

隐藏 Twitter 侧边栏

Hiding Twitter sidebar

html

css

twitter

jquery