Hide / change width / swap left / right sidebar

Hide, change the width, and change the width of the sidebar. Blogs and websites created with Giblog have a sidebar set by default. If you want to change this, you can do it.

To edit the sidebar design, edit the following CSS.

templates / static / css / common.css

First, open this file.

Look for content and sidebar settings. There are two settings, the default setting and the setting for smartphones.

The ones above "@media only screen and (max-width: 960px)" are the default settings, and the ones below are the settings for smartphones.

  / * content * /
  .content {
    / * Content area settings * /
  }

  / * side * /
  .side {
    / * Sidebar settings * /
  }

/ * Tablet and Smart phone * /
@media only screen and (max-width: 960px) {
  .content {
    / * Content area settings-Smartphone * /
  }
  .side {
    / * Sidebar settings-Smartphone * /
  }
}

Hide sidebar

If you want to hide the sidebar only for smartphones , write as follows.

  / * content * /
  .content {
    / * Content area settings * /
  }

  / * side * /
  .side {
    / * Sidebar settings * /
  }

/ * Tablet and Smart phone * /
@media only screen and (max-width: 960px) {
  .content {
    width: 100%;
  }
  .side {
    display: none;
  }
}

If you want to hide the sidebar on both your PC and smartphone , write:

  / * content * /
  .content {
    width: 100%;
  }

  / * side * /
  .side {
    display: none;
  }

/ * Tablet and Smart phone * /
@media only screen and (max-width: 960px) {
  .content {
    width: 100%;
  }
  .side {
    display: none;
  }
}

Change the width of the sidebar

To change the width of the sidebar, set as follows: Change width and margin-left.

This is an example of setting the main content to 70%, the sidebar to 29%, and the margin between them to 1%.

  / * content * /
  .content {
    float: left;
    width: 70%;
  }
  
  / * side * /
  .side {
    float: left;
    width: 29%;
    margin-left: 1%;
  }

Swap the left and right sides of the sidebar

To swap the left and right sides of the sidebar, set as follows. Change the float setting to right and change margin-left to margin-right.

  / * content * /
  .content {
    float: right;
    width: 74%;
  }
  
  / * side * /
  .side {
    float: right;
    width: 25%;
    margin-right: 1%;
  }

Reference

If you want to know the basics of CSS for changing the design of the sidebar, please refer to the following articles.

CSS basics for creating websites