• James posted an update 1 year, 6 months ago

    I have came across something really weird in wordpress and I don’t know what is causing it!

    I started developing a theme in wordpress using the twenty thirteen theme however when trying to create a post grid layout for the home page a weird space appears at the end of the row of posts (see attached image) this is making aligning my posts in the center of the screen impossible because instead of the browser using all of the posts widths added together it is also creating a space that spans the full width as well making margin auto or any custom width impossible because it just wants to use the full screen width and when all the elements do not add up to the full screen width it just creates a gap out of nowhere instead!

    I have tried tons of different css codes to try and fix this problem the first I tired was this code that basically just makes all posts elements 13% width and floats them together in a grid and should not create a weird space to the right but for some reason it does!

    .blog .post {
    position: relative;
    float: left;
    font-size: 15px;
    line-height: 22px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.3);
    margin: 0 22px 22px 0;
    position: relative;
    width: 13%;
    padding-bottom: 0px;
    margin-right: 1%;
    margin-left: 1%;
    }

    I have also tried using this code too to arrange my posts however it does get rid of the weird space if I set my width to 19.5% and have only 5 columns but if I want more than 5 columns and set it to something like 12% the gap appears! The more columns I add the the bigger the gap becomes for some odd reason!

    /* Grid Layout Custom CSS */
    body.blog article, body.archive article {
    width: 19.5%;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    margin-bottom: 10px;
    position: relative;
    }

    The weird thing is that the gap is only appearing on the right hand side the left hand side is perfectly fine and if I don’t add any padding of anything my posts will go right to the end!
    This bug is happening on on default themes and even on the blankslate theme too!
    This problem is driving me up the wall!