Site logo

Archived topic

Customize Post Container Size?

18 replies · Started by Aaron on August 19, 2016

Viewing posts 1–15 of 19

How can I customize the post container size? I'm aware there is the masonary, and columns options.. however how can I make the containers for post a custom size instead of using the default sizing?

Try this CSS:

.blog .container.grid-container {
    max-width: 1000px;
}

Not sure how you are adding the CSS but if you are using Tom's Simple CSS plugin, make sure the code is entered in the global editor.
Let me know :)

The above will do the main blog page, you might want to add to it to apply it to archives as well:

.blog .container.grid-container,
.archive .container.grid-container {
    max-width: 1000px;
}

If you're meaning the single post page, then it would be this:

.single .container.grid-container {
    max-width: 1000px;
}

I tried the code but i think I explained it wrong, I mean I want to customize the Height and width of post instead of selecting small, medium, or large for the sizing options.

If you are talking about the sizing options in Masonry then probably not. I think the height and width of those blocks are automatically calculated depending on the title and content of the post so they fit together like masonry...

What about for columns ?

What's the layout you have in mind? An example would be helpful.

Unfortunately you're confined to the three sizes in masonry (large, medium, small).

However, you can target those three classes and give them custom sizes:

.masonry .grid-sizer,
.masonry .masonry-post {
	width: 33.333%;
}

.masonry .masonry-post.width4,
.masonry .grid-sizer.width4 {
	width: 66.666%;
}

.masonry .masonry-post.width6,
.masonry .grid-sizer.width6 {
	width: 100%;
}

Worked perfectly, Thanks to both Leo & Tom for your support

No problem :)

Hi Tom / Everyone,

I'm having a 30-day personal crash-course learning WP; forgive my ignorance. I have a similar issue with 'Post' container. I want to control/indent the 'date' and all other attributes that appear within all single posts containers (not pages) without affecting global container settings. Is this possible?

Post indent

Hi Ray,

Try the following CSS below:

time.entry-date.published, .post-navigation {
    padding-left: 20px;
}

Let me know.

That will work, but it's a little too specific.

Both of these elements are wrapped in an .entry-meta class, so we can do this:

.entry-meta {
   padding-left: 20px;
}

Thanks Tom :)

This archived topic is closed to new replies.