Make width % based off generated content

I was wondering if there is a way to make a set width percentage based off the number of posts generated by wordpress.

What I"m trying to do is create a row that will sometimes have 3 or 4 items in it and I would like the to fill up 100% so when there is 4 have each div be 25% but when there are 3 divs have them be 33%.

<div class="talent"></div>
<div class="talent"></div>
<div class="talent"></div>

I would give talent a width of 33%, but sometimes it will generate 4 divs

<div class="talent"></div>
<div class="talent"></div>
<div class="talent"></div>
<div class="talent"></div>

In which case I would want them to have 25% width, is there a certain way to go about doing this?

Solutions

You could either use display:table http://fiddle.jshell.net/PJ7e8/1/

section {
    display:table;
    table-layout:fixed;/* will basicly evenly lay cells if no width provided */
    width:100%;
}
section div {
    display:table-cell;
    border:solid;
}
section div:nth-child(odd) {
    background:#cde
}

or display:flex; http://fiddle.jshell.net/PJ7e8/2/

section {
    display:flex;
}
section div {
    flex:1;/* same value for all , width will evenly be dispatch */
    border:solid;
}
section div:nth-child(odd) {
    background:#cde
}

HTML used :

<section>
    <div class="talent">talent</div>
    <div class="talent">talent</div>
    <div class="talent">talent</div>
</section>

Yeah, this is totally doable. First, you need to count the number of posts generated by the query. Something like:

if(have_posts()){
  $num_displayed_posts = ($wp_query->found_posts > get_query_var('posts_per_page')) ? get_query_var('posts_per_page') : $wp_query->found_posts;
  $layout_class = ($num_displayed_posts > 3) ? '4-col' : '3-col';
  //now you can apply this variable to your divs classes
}
  1. So, count the posts with Wordpress functions
  2. generate a variable depending on the number of posts displayed (hence the get_query_var())
  3. apply that variable to your div in the loop

Hope that helps. Let me know if you need clarification.

Tags: Html / Css / Wordpress

Similar questions

Can I use a max-width for content but full-width for background?
I'm developing a Wordpress-theme with a theme-options page. In these options, a max-width for the website can be set, but I'm having some difficulties with the content-area. When the max-width is filled in, the header- and footer-area get the max-width and a margin: O auto;. The content-pages will be created using the Gutenberg Builder and I want t...
Drop down menu gets cut off because of max-width of a parent
I've integrated the Mega Menu Plugin into the Wordpress site I'm working on. The last menu item gets truncated, because the main container has max-width set. I want the last item to overflow while still keeping the same max-width. I've tried setting overflow-x and z-index on menu ul, li and main div container, but to no avail. EDIT: the parent of t...
Image goes off screen when decreasing screen width
I have a header image when decreasing the width of the screen, disappears more and more instead of adapting to the screen: When decreasing screen width more: I thought that setting max-width: 100% should do it: But it doesn't work. Maybe because the image has already its width set to 100%? How can I force the image to be complete visible and never ...
Override automatically generated max-width CSS rule in Wordpress Enfold
My Wordpress theme (Enfold) is automatically generating a CSS file. One of the rules generated is: If I delete this line from the automatically generated CSS, it achieves my desired result but it will then revert to the original every time a style change is made in the Wordpress Admin area. The normal way to override this would be a rule in the 'cu...
How to make dynamically-generated content searchable in WordPress?
I'm writing a plugin for WordPress that dynamically generates content from a Google Documents Spreadsheet. Specifically, the plugin provides a shortcode that generates a good-looking staff list. It works, but there are two problems: I can fix the first problem with some level of caching, but what can I do about the second problem? I mention the fir...
How to create thumbnails with a fixed width, so all of them will have the same width?
right now, a thumbnail will be either 150px in height or in width, depending if it's landscape or portrait. Is there a way to make them always the same width and scale them in height accordingly, without squaring them? Kind regards

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.