Do not include this CSS in the mobile theme checkbox doesn't work

• 

  humancapitaliser · Member · Dec 30, 2016 at 5:38 pm

  • Copy link
  • Add topic to favorites

  Hello

  I have added a custom CSS and disabled the checkbox “do not include his CSS in the mobile theme”. However, the checkbox doesn’t seem to work as my cutom CSS works very well on my laptop, but it has a bad impact on the sidebar on my mobile.

  can you please assist?

  FYI this is the CSS i have added
  .sidebar {
  float: 0;
  padding: 0;
  width: 0;
  display : none;
  }

  .home .sidebar {
  float: right;
  padding: 50px 0 50px 3.75%;
  width: 28.5%;
  background-color : #f1f1f1;
  display : inline ;
  }

  .single-post .post {
  width : 100%;
  background-color : #fff;
  }

  .wrapper {
  background-color : #fff;
  }

  .content {
  width : 90%;
  }

  .home .content {
  width : 68%;
  }

  .home .wrapper section-inner {
  background-color : #f1f1f1;
  }

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

• 

  thesacredpath · Member · Jan 2, 2017 at 6:19 pm

  • Copy link

  Hi there, the check box for mobile theme at Customize > CSS is for the dedicated mobile theme, and since your site is using a responsive theme and not the dedicated mobile theme (designed to be used with non-responsive themes) we will have to use a Media Query to limit your CSS to only certain width screens/windows like this.

  @media screen and (max-width: 600px) {
  .sidebar {
  	width:0;
  	display:none
  }
  .home .sidebar {
  	padding:40px 0 900px 2%;
  	width:22%;
  	background-color:#f1f1f1;
  	display:inline
  }
  .single-post .post {
  	width:100%;
  	background-color:#fff
  }
  .wrapper {
  	background-color:#fff
  }
  .content {
  	width:90%
  }
  .home .content {
  	width:72%
  }
  .home .wrapper section-inner {
  	background-color:#f1f1f1
  }
  }

  Note the very first line, which is what tells the browsers to only apply this to screens/windows 600px and narrower. Also notice at the bottom of the above where there is an additional closing curly bracket, which closes the media query. You can remove the CSS you have and paste in the above.