How to reduce blank spaces on front page and between posts

  • MPM



    I’ve been struggling with CSS for reducing:

    1°) white space betwwen the featured_slider and then content of my front page

    2°) also white space between posts in the blog page (named “A la une” on my site?

    Any useful trick to fix it and relieve this headache?



    1°) white space betwwen the featured_slider and then content of my front page

    It looks like you are using the Page Columnist plugin. You would need to adjust the CSS within the plugin to decrease the top padding, which results in the white space.

    2°) also white space between posts in the blog page (named “A la une” on my site?

    This is because you have adsense enabled, however you have no ads showing up. Either disable adsense from displaying at the bottom of posts, or find out why your ads aren’t displaying.



    Thanks again.

    I disabled adsense and the posts display as I wanted to.

    Regarding Page Columnist pluging, I’ve been cheching the CCS, but since Im’ pretty new with CSS, I haven’t found something like “top padding” to adjust.

    This the CSS sheet, maybe you’ll find the line and value to be modified:

    #cspc-assist-bar {

    position: fixed;


    width: 100%;

    height: 16px;


    z-index: 1002;

    font-family:Arial,Verdana,Lucida,serif,sans !important;

    font-size:12px !important;

    font-weight: bold !important;

    line-height:21px !important;


    #cspc-assist-bar-content {

    width: 100%;

    height: 36px;

    background-color: #68BFEF;

    background-color: #FFD100;



    border-bottom: solid 1px #797979;

    overflow: hidden;


    #cspc-assist-bar-content input {

    margin: 0px;

    margin-right: 5px;

    border:1px solid #383838 !important;

    padding: 1px 0;

    font-family:Arial,Verdana,Lucida,serif,sans !important;


    #cspc-assist-bar-content strong a, #cspc-assist-bar-content strong a:hover { color: #0066CC !important; }

    #cspc-assist-bar-content img {

    border: 0px none;


    #cspc-assist-bar-content label {







    *:first-child + html #cspc-assist-bar-content input[type=’checkbox’]{ background-color: transparent !important; border: 0px none !important; }

    #cspc-assist-bar-content input {

    background-color: #fff !important;

    color: #000 !important;

    font-size: 12px !important;

    font-weight: normal !important;


    #cspc-assist-bar-content input + label { cursor: pointer; }

    #cspc-assist-bar-content .cspc-section {

    float: left;

    margin-top: 8px;

    padding: 0px 8px 8px 8px;

    border-right: 1px dotted #944;

    text-align:left !important;


    #cspc-assist-bar-content .cspc-widget {


    border: 1px solid transparent;

    padding: 4px;

    width: 64px;

    height: 64px;

    cursor: move;


    #cspc-assist-bar-content .cspc-widget:hover {

    border: solid 1px #444;

    -moz-border-radius: 12px;

    -webkit-border-radius: 12px;

    -khtml-border-radius: 12px;

    border-radius: 12px;

    background-color: #FF4200;



    .cspc-button {

    color: #000;

    border: solid 1px #888;

    padding: 2px 2px;

    -moz-border-radius: 8px;

    -webkit-border-radius: 8px;

    -khtml-border-radius: 8px;

    border-radius: 8px;

    background-color: #eee;


    .cspc-button:hover {

    color: #f33;

    border-color: #444;


    .cscp-widget-calendar { background: transparent url(img/vcalendar.png) no-repeat 4px 4px; }

    .cscp-widget-stats { background: transparent url(img/log.png) no-repeat 4px 4px; }

    #cspc-assist-bar-expander {

    bottom: 0px;

    height: 16px;

    width: 250px;

    margin: 0px auto;

    background-color: #FFD100;

    -moz-border-radius: 0 0 12px 12px;

    -webkit-border-bottom-right-radius: 12px;

    -webkit-border-bottom-left-radius: 12px;

    -khtml-border-bottom-right-radius: 12px;

    -khtml-border-bottom-left-radius: 12px;

    border-bottom-right-radius: 12px;

    border-bottom-left-radius: 12px;

    border-color: #797979;


    border-width:0 1px 1px 1px;

    color: #333;

    font-size: 12px;

    font-weight: bold;

    padding: 0 6px 3px;

    cursor: pointer;

    text-align: center;


    .cspc-assist-col {


    background-color: #68BFEF;

    background-color: #00BCFF;

    color: #000;

    border: 0px none;




    text-align: left;


    .cspc-assist-col .cspc-dimension {

    position: absolute;

    background-color: #fff;

    border: solid 1px #333;

    padding: 2px;

    z-index: 1003;

    font-size: 11px;




    .cspc-assist-col-locked {

    background-color: #f00 !important;

    filter:alpha(opacity=75) !important;

    opacity:0.75 !important;


    .cspc-assist-spacer {


    background: #FFD100 url(img/move-col.png) no-repeat center top;




    cursor: move;


    .cspc-assist-spacer-active {

    background: #FF8181 url(img/move-col.png) no-repeat center top;



    .cspc-readonly-text { color: #999 !important; cursor: default !important; }


    Kenneth John Odle


    Please put code between backticks.

    Front page whitespace is coming from here:

    .post {
    background: #fff;
    border-bottom: 1px solid #ccc;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border-top: 1px solid #d8d8d8;
    margin-bottom: 5px;
    overflow: visible;
    padding: 25px 15px 20px 70px;
    position: relative;
    width: 875px;

    when paddings and margins are coded this way, the order is :

    padding: top right bottom left;

    so you have 25px of padding at the top.

    As for the “a la une” blog posts, this is the same issue. Be careful of reducing the space between your blog posts too much here, because with the formatting you have, all your posts are running into each other–it’s not terribly obvious where one ends and the next begins.



    You’ve made my (sun)day.

    Thanks a lot.

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

  • You must be logged in to reply to this topic.
Do NOT follow this link or you will be banned from the site!