Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #83045
    andrewf90
    Member

    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.

    #83063
    Mahesh
    Keymaster

    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

    #83110
    andrewf90
    Member

    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!

    #83118
    andrewf90
    Member

    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!

    #83134
    Mahesh
    Keymaster

    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

    #83155
    andrewf90
    Member

    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!

    #83199
    Mahesh
    Keymaster

    Hi @andrewf90,

    For the above changes, please use the following CSS:

    #comments {
        padding-left: 0;
    }

    Let me know if this helps.

    Regards,
    Mahesh

    #83246
    andrewf90
    Member

    It does! It’s just perfect.

    Thank you!

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Padding’ is closed to new replies.