Making Shaan theme responsive

• 

  lmckp · Member · Nov 9, 2016 at 8:07 pm

  • Copy link
  • Add topic to favorites

  I’m trying to make this blog responsive to mobile and tablet devices using a media query, but I’m having difficulty. How do I refer to the correct element or container to change the width of the page? Please advise.

  The blog I need help with is: (visible only to logged in users)

• 

  lmckp · Member · Nov 10, 2016 at 7:21 pm

  • Copy link

  I have disabled the Mobile theme under “Mobile Options”, and now it looks decent when I toggle between the device sizes in a Chrome browser. However, it doesn’t look good when I toggle the sizes in the WordPress Customizer.

  It doesn’t look like disabling the mobile theme is making it truly responsive, so CSS is still my best option. Here’s the CSS I have so far, which the media query on the bottom. It appears my syntax is correct, but the size of the container is not changing:

  #container {
  background-image: none;
  }

  #container {
  margin-left: 80px;
  width: 800px;
  }

  #sidebar {
  display: none;
  }

  #content.narrow {
  width: 750px;
  }

  #access ul {
  width: 700px;
  }

  #site-title {
  font-size: 52px;
  margin-left: 100px;
  }

  #post-title {
  width: 774px !important;
  }

  @media only screen and (max-width: 480px) {
  #container {
  width: 100%;
  }
  }

• 

  thesacredpath · Member · Nov 12, 2016 at 4:19 pm

  • Copy link

  @lmckp, making a non-responsive theme responsive can be a big task. Given that Shaan is retired, have you considered looking for a different theme that is responsive?

• 

  lmckp · Member · Dec 7, 2016 at 6:10 pm

  • Copy link

  Keeping the Shaan theme would be preferred, and I have a pretty solid grasp of CSS. However, it may be that not all the CSS is customizable for an older theme such as Shaan, and looking for a responsive theme may be necessary.

• 

  thesacredpath · Member · Dec 8, 2016 at 6:58 pm

  • Copy link

  I wish you well on the project, and let us know if you run into problems.