Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Can you provide a link to the webpage with the issue?
You need to adjust the width of the .hentry elements’ container and set its margins to auto. Something like this should work:
#main {
margin: 0 auto;
width: 600px;
}
Note this will adjust the page width on subsequent pages/posts, too, and I don’t know how it will affect the responsive versions of the theme. You may need to play around with it to get the results you desire.
I recommend doing this in a child theme or a CSS plugin (like Jetpack). You can find helpful resources for CSS here, and I recommend using Firebug for this type of work.
Good luck!
Okay now I managed to center them, but they still appear under each other
*page 1
*page 2
*page 3
But I want them to be like
*page 1 *page 2 *page 3
Changing the hentry element height doesn’t help. I am already using child theme and Firebug, but I still doesn’t manage to find correct code for css to align them as wanted.
Currently I hentry code looks like this:
.hentry {
background: transparent;
margin: 10px auto;
width: 800px;
height: 180px;
float: center;
position: relative;
table-layout:fixed;
}
I have played with settings but nothing seems to help me. I am pretty sure it’s about my lack of knowladge.
float: center is not a valid CSS property. Can you post a URL so we can see what you’re trying to do?
Hi again.
The webpage is located at http://www.snakehouse.ee
You need to float the .hentry elements to the left and remove margin: auto on those.
Then do as I said above and set a narrower fixed width on the containing div, in this case #main, setting its margins to auto to center it.
Thank You, very much. That fixed it.
Although it affects all other pages too, but it’s okay.
Thanks!
