Reduce padding on sides of webpage

  • Hi there,

    I am helping a friend with her website at https://francaisepeachstate.com/ and she wants the post images on the home page to be larger, however whenever I adjust them they begin to overlap. It cannot figure out how to make the padding smaller on either side of the blog posts so I can make them larger and so they will fit.

    Thank you!

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hello ayalves1992,

    How much bigger does your friend want the images to be?

    Are you able to put custom CSS into the site?

    From a quick look at the site I would suggest that you will need to amend the padding by adding this CSS to your child theme or Custom CSS plugin.

    .sp-grid li {
width: 300px;
margin-right: 16px;
margin-bottom: 45px;
}

    Those numbers are the current one your theme is using, so if you wanted less space between the articles you could reduce the margin-right: to say 6px? You would then probably need to increase the width: by 10

    Let me know how you get on.
    Drew

    Thread Starter ayalves1992

    (@ayalves1992)

    Hi Drew,

    Thank you for your response!

    I might not have explained it well – she wants the padding(margin?) between the side of the screen and the post images to be smaller, not the padding between the images. Sorry if that was confusing!

    Hi again ayalves1992,

    I see.

    You could change the width of your .container class to something wider or even 98% (100 makes the menu look odd), then change the width of the li to 32.33%

    The CSS would look something like this:

    .container {
  margin: 0 auto;
  width: 98%;
}
.sp-grid li {
  display: inline-block;
  margin-bottom: 45px;
  margin-right: 12px;
  vertical-align: top;
  width: 32.33%;
}
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Reduce padding on sides of webpage’ is closed to new replies.