[andrewf90]

Hi, Catch Themes!

I’ve a question about the padding if I may. What might be the code that I can use to reduce the padding within the page and surrounding the page and surrounding the search box?

Here’s my link: http://goo.gl/49Mbeo

Here’s an image to help describe what I mean: http://snag.gy/rDANy.jpg

i) reduce padding within the page itself but at the edges
ii) reduce padding surrounding the page/border
iii) reduce padding around the search box

I’m still trying to work on the appearance on of the website, and the reduced padding would certainly make things look better.

Thanks again, guys. You’ve been very helpful, and I’m very appreciative of all this help.

[Mahesh]

Hi @andrewf90,

There is no padding in the page, the grey space in the either side is the background which is seen because of the boxed layout of the theme. By default, the width of the content is set to 1200px.
For reducing the padding around search box, you can add the following CSS in “Dashboard=> Appearance=> Theme Options=> Custom CSS” box.
.widget {
padding-right: 0;
}

Let me know if I can help you further to this.

Regards,
Mahesh

[andrewf90]

Hey!

Thanks for your super prompt reply.

The reduced padding around the search box worked like magic.

That’s what I would love to reduce, the grey space. How could I widen the page so there’s less grey space seen on the screen?

Also, I’m not sure what you call it, but how do you make the text within the page closer to the edges of the page? There’s extra white space at the edges of the page where I would like the text to expand into.

Thanks again for all your help!

[andrewf90]

Hey!

I was browsing through the other forums on here and I found this code:

.wrapper { width: 100%; } This seems to remove the grey areas on the left and right. Is this safe to use?

Now that’s sorted out, do you see how the Header and the body text are removed from the edges of the page? How can I customize it to bring the Header text and content closer to the edge of the page?

Thanks again!

[Mahesh]

Hi @andrewf90,

About the full-width, as long as the site seems to work normally in both desktop and other responsive views, it is okay to use it.

And for bringing Header text and content closer to the edge of the pages, in your Custom CSS, change:

.wrapper {
    width: 98%;
}

to

.wrapper {
    width: 100%;
}

Let me know if fixes your issue.

Regards,
Mahesh

[andrewf90]

Hey,

The wrapper code definitely helps to remove the grey border/background, but I’m wondering how to reduce the spacing in this image:

http://snag.gy/LrFsL.jpg

I drew a red arrow to better illustrate what I’m trying to achieve. Sorry for the confusion

Thanks again for all your help!

[Mahesh]

Hi @andrewf90,

For the above changes, please use the following CSS:

#comments {
    padding-left: 0;
}

Let me know if this helps.

Regards,
Mahesh

[andrewf90]

It does! It’s just perfect.

Thank you!

[Author]

Posts