Weird space on twentysixteen to right hand side on site-content

  • Resolved jameshh93

    (@jameshh93)


    8 years, 11 months ago

    Hello I have been trying my best to make a 8 grid layout for my index page however what ever I try on what ever default theme I always seem to be getting this weird space to the right of the last .post in the row
    even though it should not be there. Its seems wordpress wants to make my site content full width no matter what.

    for instance if I strip the twetnysixteen theme and have just

    body.blog article, body.archive article {
width: 12.5%;
display: inline-block;
vertical-align: top;
text-align: left;
margin-bottom: 10px;
position: relative;
}

    the problem gets worse the more columns I have per row.

    also this happens on the twentythirteen theme

    here’s a link to an image of it in action when using this code to sort the posts

    .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%;
}

    https://utterli.com/wp-content/uploads/rtMedia/users/2/2016/04/stupid-gap-shouldnt-exist-800×360.png

    Please help.

    thank you

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

  • any chance you can post a live link to the problem page?

    how many columns are you trying to have with the posted CSS codes?

    have you eradicated any other paddings or margins in the other outer divs?

    have you edited any of the php templates?

    Thread Starter jameshh93

    (@jameshh93)

    Thanks for the reply I really do appreciate it because this problem is driving me crazy as I simply cannot see what is happening. currently I am working on local host however the problem is really easy to replicate on the twentysixteen preview (happens on all themes I have tried) https://wp-themes.com/twentysixteen/

    simply make site-main width auto and then add this code to .site-main > article and then you will find that space even though it shouldnt be there.

    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%;

    all I want to do is make the posts in a nice grid row of 7 and then center it but that space is making things impossible to center.

    ??

    seven columns won’t work as each of your columns is 15% wide;
    13% + 2 * 1%

    reduce the 13% to 12.28%

    or reduce the left/right margins accordingly.

    this is what I tried in a child theme of Twenty Sixteen, as teh only added CSS:

    .site-main { width: auto; }

.site-main > article {
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 1% 22px 1%;
position: relative;
width: 12.28%;
padding-bottom: 0px;
}

.site-main > article:nth-child(7n+1) {
	clear: left;
}

    works ok.

    Thread Starter jameshh93

    (@jameshh93)

    Thank you so much! I hope you have a nice day ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Weird space on twentysixteen to right hand side on site-content’ is closed to new replies.