Need css to make sidebar show in mobile

• 

  thisismotherhoodblog · Member · Nov 20, 2015 at 3:23 am

  • Copy link
  • Add topic to favorites

  Hi,
  I’m trying to get my sidebar to show up on when people see my site on mobile devices. My blog is http://www.thisismotherhoodblog.com
  I am using the “Collinear” theme and I really like it except for this.
  Thank you!

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

• 

  thesacredpath · Member · Nov 20, 2015 at 4:44 am

  • Copy link

  Hi @thisismotherhoodblog, your sidebar actually moves to the bottom of your site below the content, but because you have infinite scroll activated at Settings > Reading, it doesn’t show until after someone scrolls all the way down to your last post. I would suggest disabling infinite scroll, which will put an “older posts” button at the bottom of your list of posts and the sidebar will then show below the content.

• 

  thisismotherhoodblog · Member · Nov 20, 2015 at 12:13 pm

  • Copy link

  Sacred path, thanks for your response. I see that other sites are able to have a sidebar when viewed on mobile devices and I really want that to happen to attract potential advertisers. Can you help me figure out a way to do it?

• 

  thesacredpath · Member · Nov 20, 2015 at 7:51 pm

  • Copy link

  You mention advertisers, so I am going to suggest that you look through our support page on Advertising as there are limits on what you can do here as far as advertising. If you are wanting to bring in advertisers, a self-hosted WordPress installation using the software from WordPress.org would probably be a better choice for you.

  On mobiles, with a responsive designed theme, there simply isn’t enough room for content and a sidebar. You can see generally what things would look like by going to the Coraline demo page and narrowing your browser window way down, or visit it on your phone.

  Here is a screenshot to give you an idea of what would happen to the content and sidebar on a responsive width theme if you keep the sidebar beside the content: https://cldup.com/kL9ESaZXSM-900×900.png .

  What you may want to look at would be a flexible width theme, such as Coraline. You can visit the Coraline Demo page on your phone.

  That said, let me work on getting the sidebar to show on all screen/window widths and I’ll post the code back here.

• 

  thesacredpath · Member · Nov 20, 2015 at 9:11 pm

  • Copy link

  Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS to keep the sidebar at right on all devices. Given that the Facebook code is coming from FB and not something we are in control of, there is little I can do to resize it to fit in the sidebar on small devices. I did manage to get the Twitter widget resized, but as you will notice there are other issues on it and those other issues I cannot fix. Some stuff on the Twitter widget I can fix and some I cannot.

  @media screen and (max-width: 1056px) {
    .content-area {
      max-width: 50%;
      float: left;
    }
    .widget-area {
      max-width: 45% !important;
      float: right;
    }
    .widget {
      max-width: 100% !important;
    }
    .widget_twitter_timeline iframe {
      min-width: 50px !important;
    }
  }

• 

  thisismotherhoodblog · Member · Nov 21, 2015 at 3:41 pm

  • Copy link

  Thank you for all your help. I’m a long way from getting advertising, so I will cross that bridge when I come to it, I suppose.
  For now, I switched my theme to Coraline. I really like it.
  Thanks again!

• 

  thesacredpath · Member · Nov 21, 2015 at 7:52 pm

  • Copy link

  You are welcome.