如何在较小的屏幕上使我的侧边栏水平？

Question

我想为当地的猫庇护所做一些好事，所以我正在免费为他们建立一个新的网页。然而，我是一个新手，并且可以真正使用一些帮助完成最后的接触。

虽然我会非常感谢HTML / CSS的任何帮助，特别是指出我的编码中的错误，我现在的问题是我的侧边栏。当屏幕小于桌面大小时，我终于使它浮在主要内容之上，但绝对拒绝自己显示内容和水平内容。有人可以帮我找出我做错了什么吗？

而且......提前非常感谢你。我一直在努力解决这个问题超过一天。

我所有的HTML / CSS：https://codepen.io/Pinchofginger/pen/KZqzEP#code-area

我的侧边栏的代码：

 <div id="sidebar">

          <ul>
            <li class="fancy">
              <h3>Tryk her</h3> <img src="billeder/kat/.jpg" alt="kat">
              <p><a href="#">Kat2</a>
                <p>bla bla bla bla bla bla bla bla</p>
            </li>

            <li class="fancy">
              <h3>Tryk her også</h3> <img src="billeder/kit.jpg" alt="Kit">
              <p><a href="#">Kat2</a>
                <p>bla bla bla bla bla bla</p>
            </li>

            <li class="fancy">
              <h3>Endelig</h3><img src="billeder/killinger.jpg" alt="Her">
              <p>
                <p><a href="#">Kat3</a> bla bla bla bla bla bla bla</p>
            </li>

            <li class="fancy"> link </li>
            <li class="fancy"> link </li>
            <li class="fancy"> link </li>
            <li class="fancy"> link </li>

          </ul>
        </div>
        <!-- Sidebar -->

和CSS

   #sidebar
{   text-align: center;
    float: left;
  width:15%;
    margin-right: 3%;
    padding: 15px 10px 10px 10px;
    background: white;
    color: #215e1e;
    border: solid 1px #c0c0c0;}

#sidebar img
{width: 87%;}

#sidebar h2, #sidebar h3, #sidebar h4
{   color: black;}

#sidebar a
{ font-weight: bold;
text-decoration: none;
color: #2b6028}

#sidebar ul {   list-style: none;}


.fancy
{   padding: 8px 0 8px 0;
    border-top: solid 1.3px brown;}

Answer 1

尝试查看CSS网格或Bootstrap之类的内容，它们可能会为您提供所需的内容。

Answer 2

这些方面的东西：

@media only screen and (max-width: 750px) {

    #sidebar {
        float: none;
    }

    #sidebar .ul {
        display: inline-box;
    }

}

（这到了css文件的末尾）

编辑：我不会建议css框架这么小的东西，因为这些将是矫枉过正的，至少需要几个星期才能理解，这些是怎么回事:)

Answer 3

我想要达到你想要的效果，你需要做这样的事情：

@media only screen and (max-width: 800px){
 #sidebar{
     width:100%;
 }
 #sidebar li,h3,img,p{
     display:inline;
 }

并在同一媒体查询中添加一些样式，使其看起来不错