How to change left & right page border size?

  • Resolved paulio

    (@paulio)


    8 years, 1 month ago

    Hi

    How can I adjust the amount of blank space on the left and right sides of the page please?
    Or to ask the question the other way around, how can I make the page content use more of the window width?

    I’ve spent quite a while playing with DOM Explorer turning bits of css on & off, & changing values but even though I can turn the page borders off the content stays the same width even if it’s up against the left hand side.

    I’m guessing it’s quite simple once you know how but I can’t find it.

    Any help gratefully received…

    Many thanks.

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

  • You can try something like 

    #main-wrapper > div:nth-child(1) {width:100%;} // width of the container
.row-fluid {width: 100%;} // width of the text

    But I’m not sure the website will still be responsive.

    Thread Starter paulio

    (@paulio)

    Hi Tandhruil

    That has no effect unfortunately.

    I can get the left sidebar (no right sidebar in use) to the left side of the page, but the content area seems to have a maximum width set somewhere. This seems to be related to the span9 class, but if I make that a percentage it seems to be related to the whole page rather than the container.

    Hi,
    Please post your site url. It would help

    Try something like that

    #main-wrapper > div:nth-child(1) {width: 100%;} // width of the container
.left {width: 10%;} // width of the left sidebar
.right {width: 10%;} // width of the right sidebar
#content  {width: 80%;} // witdh of the content

    I’ve test it on my website, it works.

    • This reply was modified 8 years, 1 month ago by Tandhruil.
    Thread Starter paulio

    (@paulio)

    Hi All

    Many thanks for the suggestions.

    The solution turned out to be:
    Install Childify plugin.
    Create Child theme.
    Add this to the functions.php file:

    // START OF Display full-width pages
add_filter('tc_fp_widget_area', 'use_row_fluid');
add_filter('tc_footer_widget_area', 'use_row_fluid');
add_filter('tc_column_content_wrapper_classes', 'use_row_fluid');
 
function use_row_fluid($classes){
  return preg_replace('/^row$/', 'row-fluid', $classes);
}
// END OF Display full-width pages

    And this to the child theme’s style.css:

    /* START OF Display full-width pages */
.container { 
    width: 100% !important;
}
#main-wrapper {
    padding: 0px 30px 0px 10px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}
/* END OF Display full-width pages */

    Many thanks.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How to change left & right page border size?’ is closed to new replies.