Remove padding from body of pages

• 

  johodges100 · Member · May 11, 2015 at 5:11 pm

  • Copy link
  • Add topic to favorites

  Hiya

  I’d like to remove any padding from the body of my website pages, so I can add an image that reaches to the edges of the box and doesnt sit on on / show a white background

  Any help really appreciated

  Many thanks

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

• 

  lizthefair · Member · May 12, 2015 at 5:47 pm

  • Copy link

  I can help you with this, but I need a bit more information first.

  When you say you want to remove padding, do you mean you don’t want any of the black background of your page to show, but the rest of the site should look about how it does now?

• 

  johodges100 · Member · May 12, 2015 at 6:02 pm

  • Copy link

  Hi,

  Thanks so much for responding.

  Theres a couple of things:

  I want to be able to add an image to the content box of a page so that it reaches to the edges ie full width / height with no white showing around it.

  Also I want to be able to change the background colour of the content box of a page ( ie behind the text). I did find some some code to do this but there was still that padding/ margin so there was a white border and that did not look good. I’d like to change the colour of the whole content box.

  Thanks you so much in advance

  Jo

• 

  lizthefair · Member · May 13, 2015 at 3:15 pm

  • Copy link

  Also I want to be able to change the background colour of the content box of a page ( ie behind the text). I did find some some code to do this but there was still that padding/ margin so there was a white border and that did not look good. I’d like to change the colour of the whole content box.

  Try this instead.

  .content-wrapper, .grid-area{
  	background:green;
  }

  Green is not the color you want, but it will show you what’s being covered.

  I want to be able to add an image to the content box of a page so that it reaches to the edges ie full width / height with no white showing around it.

  Could you send me a link to a page with an image that has white around it now?. I’m not seeing an example of that on your site and a concrete example will help me get you the code you need.

• 

  johodges100 · Member · May 17, 2015 at 2:57 pm

  • Copy link

  Hi

  Thats works brilliantly. Many thanks – gives me more options to play around with now.

  I haven’t added a photo as I couldn’t get it to look as I wanted it to. I have added a test photo to the following page – http://sanctuary2015.org/dark-star-lounge/ – so you can see the white border that I am referring to. I changed the default image size to 1230 in the customisation options and also in the edit section of the photo, but there is still a white border surrounding it. I would like it to go to the edge of the content box when adding to a specific page ( I know I will need to add the page id to the code)

  Also – how would I change the colour of the footer box?

  Many thanks for your time

  Jo

• 

  alexjgustafson · Member · May 17, 2015 at 9:12 pm

  • Copy link

  The white space around that image is actually the margin and padding of the main content area. This CSS removes it at all responsive breaks:

  Also – how would I change the colour of the footer box?

  I’m afraid I don’t know what you’re referring to by ‘footer box.’ Your theme doesn’t seem to have an obvious footer.

• 

  johodges100 · Member · May 18, 2015 at 3:02 pm

  • Copy link

  Thanks Alex, but I cant get that link to load – Liz’s css (above) worked although I haven’t changed the colour as yet.

  Footer – I have a footer on the ‘about’ page and it is this that I wanted to change the colour of. Help appreciated.

  Many thanks

  Jo

  ps It would be great If you also had a moment to answer the following Q – Is it possible to put an image as a background behind the text?

• 

  alexjgustafson · Member · May 18, 2015 at 3:23 pm

  • Copy link

  Hi Jo,

  Thanks Alex, but I cant get that link to load

  Sorry about that, here’s all the CSS that is there:

  /* Make content full page width, no margin or padding, at all responsive points */
  
  .no-sidebar-full .content-area , .content-area {
  	margin-left: 0;
  	margin-right: 0;
  	padding-left: 0;
  	padding-right: 0;
  	width: 100%;
  }
  }
  
  @media screen and (min-width: 600px) {
  .no-sidebar-full .content-area , .content-area {
  	margin-left: 0;
  	margin-right: 0;
  	padding-left: 0;
  	padding-right: 0;
  	width: 100%;
  }
  }
  
  @media screen and (min-width: 768px) {
  .no-sidebar-full .content-area , .content-area {
  	margin-left: 0;
  	margin-right: 0;
  	padding-left: 0;
  	padding-right: 0;
  	width: 100%;
  }
  }
  
  @media screen and (min-width: 1020px) {
  .no-sidebar-full .content-area , .content-area {
  	margin-left: 0;
  	margin-right: 0;
  	padding-left: 0;
  	padding-right: 0;
  	width: 100%;
  }
  }
  
  @media screen and (min-width: 1230px) {
  .no-sidebar-full .content-area , .content-area {
  	margin-left: 0;
  	margin-right: 0;
  	padding-left: 0;
  	padding-right: 0;
  	width: 100%;
  }
  }

  Footer – I have a footer on the ‘about’ page and it is this that I wanted to change the colour of. Help appreciated.

  Here’s code for that. Change #c0c0ff to any color your prefer, of course:

  /* Change background color of Footer on About page*/
  .footer-widget-area{
  	background-color: #c0c0ff;
  }

  ps It would be great If you also had a moment to answer the following Q – Is it possible to put an image as a background behind the text?

  Yes, that’s possible. Here’s a rather silly example you can try out, also in your footer area:

  /* Use image as background*/
  .footer-widget-area{
  	background: url('https://placekitten.com/g/1020/400');
  }

  Best,

  -Alex G.

• 

  johodges100 · Member · May 20, 2015 at 4:40 pm

  • Copy link

  Hi Alex

  Many thanks. I have managed to slightly alter the code ( below) and have the image on a specified page. How do I get an image from the media library there instead of the kitten url? ( lovely though the kitten image is!)

  body.page-id-1107 /* Use image as background*/
  .content-wrapper, .grid-area {
  background: url(‘https://placekitten.com/g/1020/400’);
  }

  Cheers! Jo

• 

  alexjgustafson · Member · May 21, 2015 at 12:54 pm

  • Copy link

  Hi Jo,

  Sometimes a kitten just isn’t what you need, is it? :)

  Click on the image in your media library, and you’ll get a screen that looks like this:

  

  Double-click on that URL to highlight it, copy, then paste it into your CSS.

  Sorry for yet another cat image example.

  -Alex G.