reduce left margin – sela theme

• 

  highweekvh · Member · Apr 25, 2015 at 8:51 pm

  • Copy link
  • Add topic to favorites

  Hello,

  I would like to reduce the left margin on some of my pages (the ones with sidebars). For example see: http://highweekvillagehall.org/regular-activities/

  I found this css on the forum:

  .page .content-wrapper {
  padding-left: 60px;
  }
  .page .content-wrapper .content-area {
  width: 100%;
  max-width: 761px;
  }

  This looks great on my laptop and is mostly ok on my iPad mini. However when the page is viewed on a Samsung S4 the left menu is too wide. Is there a way to fix this?

  Alternatively is there a way to switch off the above css when the website is viewed on a mobile device (as the default seems ok when viewed on a mobile device).

  Hope this makes sense!

  Lucy

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

• 

  thesacredpath · Member · Apr 25, 2015 at 11:51 pm

  • Copy link

  Hi Lucy, I’ve specifically targeted the regular activities page by using the unique page id body class (found in the opening body HTML tag on that page and then limited this change to 1180px and wider screens, which is when the left padding reduces for smaller screens. Give the following a try and see what you think.

  @media screen and (min-width: 1180px) {
  	.page-id-130 .content-wrapper {
  		padding-left: 50px;
  	}
  	.page-id-130 .content-wrapper .content-area {
  		width: 740px
  	}
  }

• 

  highweekvh · Member · May 16, 2015 at 7:17 pm

  • Copy link

  Thank you for this! How would I apply this to the following pages:

  page-id-14

  page-id-6

  page-id-10

  Many thanks,
  Lucy

• 

  kathrynwp · Staff · May 22, 2015 at 2:56 pm

  • Copy link

  Hi Lucy, the syntax for adding additional pages would look like this:

  @media screen and (min-width: 1180px) {
  	.page-id-130 .content-wrapper, .page-id-14 .content-wrapper, .page-id-6 .content-wrapper, .page-id-10 .content-wrapper  {
  		padding-left: 50px;
  	}
  	.page-id-130 .content-wrapper .content-area, .page-id-14 .content-wrapper .content-area, .page-id-6 .content-wrapper .content-area, .page-id-10 .content-wrapper .content-area {
  		width: 740px
  	}
  }

• 

  highweekvh · Member · May 30, 2015 at 8:50 pm

  • Copy link

  Thanks – that seems to have worked! :-)