- This topic has 7 replies, 2 voices, and was last updated 7 years, 4 months ago by
andrewf90.
-
AuthorPosts
-
January 17, 2016 at 8:49 am #83045
andrewf90
MemberHi, 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 boxI’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.
January 17, 2016 at 1:37 pm #83063Mahesh
KeymasterHi @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,
MaheshJanuary 18, 2016 at 12:43 am #83110andrewf90
MemberHey!
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!
January 18, 2016 at 2:27 am #83118andrewf90
MemberHey!
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!
January 18, 2016 at 10:35 am #83134Mahesh
KeymasterHi @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,
MaheshJanuary 18, 2016 at 9:25 pm #83155andrewf90
MemberHey,
The wrapper code definitely helps to remove the grey border/background, but I’m wondering how to reduce the spacing in this image:
I drew a red arrow to better illustrate what I’m trying to achieve. Sorry for the confusion
Thanks again for all your help!
January 19, 2016 at 9:21 am #83199Mahesh
KeymasterHi @andrewf90,
For the above changes, please use the following CSS:
#comments { padding-left: 0; }
Let me know if this helps.
Regards,
MaheshJanuary 19, 2016 at 10:27 pm #83246andrewf90
MemberIt does! It’s just perfect.
Thank you!
-
AuthorPosts
- The topic ‘Padding’ is closed to new replies.