How do i make the sidebar responsive

debugcn Published at Dev

Timo B.

I hope this code is alright, I'm a beginner. I have the blue sidebar on the right which for one is too low and also not responsive, I'm not sure how to code these things. Thank you very much!

html {
 font-family: "Trebuchet MS", Helvetica, sans-serif;
 color: #424242;
}

body {
  background-color: #D5FAFB;
  margin-top: 35px;
  margin-right: 50px;
  margin-left: 50px;
}

.text {
  margin-right: 800px;
}

img {
  float: right;
  border: 5px solid black;
  margin-right: 500px;
}

h1 {
 color: #232424;
 font-size: 50px;
 text-align: center;
}

.sidebar {
  float: right;
  background-color: #3399FF;
  padding: 30px;
  font-size: 30px;
  margin-bottom: 300px;

}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css/new-styles.css" media="all">
    <title>How to take care of Fido</title>
  </head>

  <body>
    <h1>Instructions for Fido's babysitter</h1>

    <h2>Thanks so much for watching Fido this weekend! Here's everything you need to know while I'm gone.</h2>

    <img class="image" src="img/helsinki.jpg">

    <div class="text">
      <p>Here's a bit of history about Fido. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

      <p> Fido is allergic to a lot of foods.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

      <p>Fido likes to play. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

      <p>Here is a list of things that you should do with Fido every day.</p>
    </div>

    <div class="sidebar">
      <p>Menu</p>
      <p>Picture</p>
      <p>Videos</p>
      <p>Contact</p>
    </div>

    <ul>
      <li>Walk him</li>
      <li>Feed him</li>
      <li>Pet him</li>
    </ul>

    <p>If you have any questions while i'm out of town, I <strong>won't have cell service</strong> but you can<a href="mailto:[email protected]" class="btn btn-primary btn-lg" role="button"> email me</a> if you need anything</p>

    <p>Thanks again!</p>
  </body>
</html>

rafaelcastrocouto

SOLUTION

I'm not sure this is what you were looking for ... but it's pretty and working just fine.

.sidebar {
  position: fixed;
  top: 20%;
  right: -170px;
}
.sidebar:hover {
  right: 0;
}

html {
 font-family: "Trebuchet MS", Helvetica, sans-serif;
 color: #424242;
}

body {
  background-color: #D5FAFB;
  margin-top: 35px;
  margin-right: 50px;
  margin-left: 50px;
  min-width: 200px;
  overflow-x: hidden;
}


img {
  float: right;
  border: 5px solid black;
  margin-right: 500px;
}

h1 {
 color: #232424;
 font-size: 50px;
 text-align: center;
}

.sidebar {
  opacity: 0.9;
  position: fixed;
  top: 20%;
  right: -170px;
  background-color: #3399FF;
  padding: 30px;
  font-size: 30px;
  margin-bottom: 300px;
  border-radius: 5px 0 0 5px;
  transition: right 0.5s ease-in-out;
}
.sidebar:hover {
  right: 0;
}
.sidebar p {
  margin: 5px;
  padding: 10px;
}
.sidebar p:hover {
  background-color: rgba(255,255,255,0.3);
}
.sidebar > span {
  color: white;
  position: absolute;
  left: 4px; top: 45%;
}
.sidebar > span {
  color: white;
  position: absolute;
  left: 4px; top: 45%;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}
.sidebar:hover > span {
  opacity: 0;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<h1>Instructions for Fido's babysitter</h1>

    <h2>Thanks so much for watching Fido this weekend! Here's everything you need to know while I'm gone.</h2>

    <img class="image" src="img/helsinki.jpg">

    <div class="text">
      <p>Here's a bit of history about Fido. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

      <p> Fido is allergic to a lot of foods.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

      <p>Fido likes to play. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

      <p>Here is a list of things that you should do with Fido every day.</p>
    </div>

    <div class="sidebar">
      <p>Menu</p>
      <p>Picture</p>
      <p>Videos</p>
      <p>Contact</p>
      <span>«</span>
    </div>

    <ul>
      <li>Walk him</li>
      <li>Feed him</li>
      <li>Pet him</li>
    </ul>

    <p>If you have any questions while i'm out of town, I <strong>won't have cell service</strong> but you can<a href="mailto:[email protected]" class="btn btn-primary btn-lg" role="button"> email me</a> if you need anything</p>

    <p>Thanks again!</p>
</body>
</html>

Collected from the Internet

Please contact [email protected] to delete if infringement.