How do I make my sidebar horizontal on smaller screens?

Question

I wanted to do something nice for the local catshelter, so I am building them a new webpage for free. I am somewhat of a newbie, however, and could really use some help with the finishing touches.

While I would would be deeply grateful for any help with the HTML/CSS, especially to point out errors in my coding, my problem at the moment is my sidebar. I finally made it float above the main content when the screen is smaller than desktop size, but it absolutely refuses to display itself and the content horizontally. Could someone please help me find out what I am doing wrong?

And.. thank you so much in advance. I have been struggling with this problem for more than a day now.

All my HTML/CSS: https://codepen.io/Pinchofginger/pen/KZqzEP#code-area

The code for my sidebar:

 <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 -->

and the 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

Something along these lines:

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

    #sidebar {
        float: none;
    }

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

}

(This goes to the end of css file)

Edit: I wouldn't suggest css frameworks for such a small thing, as these would be overkill and would take at least a few weeks before you understand, what's going on in these :)

Answer 3

I think to get the effect that you desire you need to do something like this:

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

and in the same media query add some styling to make it look nice