0

I have a FAQ page with blocks of texts. When you click read more, the text expand. I am using Bootstrap, Wordpress and CSS. The order of the FAQ's does not matter. It can be in any order.

The problem: When you click read more, it create a lot of white space. I would like to remove this space. I think it might be a row issue. I want the FAQ's to look nice and have the same amount of space between them.

I am new to bootstrap and not sure what is the best approach. I don't have to use bootstrap grids for this page. If there is a better way of doing this, that would be great too.

enter image description here

    <div class="row">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); ?>
               <div class="col-lg-4 col-sm-6">
                  <div class="faq-all">
                    <div class="faq-item">
                        <h2><?php the_title(); ?></h2>
                        <article>
                          <div class="faq-intro">
                             <?php the_content(); ?>
                          </div>
                          <div class="faq-info">
                             <?php the_content(); ?>
                          </div>   
                          <div class="faq-link">
                            <a href="#" class="read-more">LES HELE SVARET</a>
                            <a href="#" class="read-less">LES MINDRE</a>
                        </div>
                       </article>
                    </div>
                  </div>
               </div>
                <?php endwhile; ?>
            </div>

Thanks in advance.

Kong
  • 315
  • 2
  • 12
  • I'd wrap the whole thing in a one-row, three-column Bootstrap container (using the "col-*-4" classes). – alex Mar 01 '16 at 16:29
  • Looks like you're attempting a Pinterest like layout with your FAQs. Depending on how you want your FAQ ordered you might not be able to do this with Bootstrap 3, maybe in v4 with flexbox. You could use something like [Masonry](http://masonry.desandro.com/) to achieve that affect. You could sort of do this with columns of FAQs rather than rows of them but might get highly disordered with a responsive design. @alex that's what it looks like the OP posted. – hungerstar Mar 01 '16 at 16:31
  • @hungerstar If I'm not mistaken, the OP is using a one-row, one-column Bootstrap container. If the OP were to stick each panel element in a `col-xs-4` container (for instance), wouldn't they be able to close up the space between the panels using just padding/margins? – alex Mar 01 '16 at 16:34
  • @alex there is a loop right after `.row` generating `x` amount of `.col-lg-4` inside the `.row`. The OP has dynamic height FAQ panels/boxes so using padding/margin would be a real headache and impractical (via pure CSS) as you'd have to code for each individual box (opened and closed). Not to mention opening one box will shift others around. How do you handle that with just CSS? I think the solution is JS and possibly flexbox, though I'm not very familiar with flexbox so cannot guarantee that it is a solution here. – hungerstar Mar 01 '16 at 16:39
  • @hungerstar I'd approach it [like this](https://jsfiddle.net/2j9ukLs8/1/). I'm not sure what's meant by "dynamic height FAQ panels/boxes" - I hope I'm not oversimplifying this. – alex Mar 01 '16 at 16:44
  • @hungerstar Never mind, I see the issue. The post should have been tagged with `php`. Maybe you could leverage PHP in this scenario to insert the panel elements in an alternating fashion into each of the three columns, rather than injecting new columns into the row. – alex Mar 01 '16 at 16:49
  • @alex the OPs FAQ panels/boxes expand and contract via a _read more_ link that shows more text when clicked. In your example you placed a multiple FAQ in a single column, which could be possible. The thing you need to worry about is a possible ordering issue. If OP wants items listed left to right top bottom (at least roughly) and large screens show three columns and small screen two or even one, now you have a column that contains FAQs 1, 4, 7, 10 with a column after that containing FAQs 2, 5, 8, 11 etc. – hungerstar Mar 01 '16 at 16:56
  • @alex I think JS might be the best approach, there's too many variables that `php` wouldn't know about. If the user resizes the viewport or orientation and that changes column count, how would `php` adjust panel placement? It can't, it's too late for `php` to do anything at that point. – hungerstar Mar 01 '16 at 16:57
  • Hi, the order of the boxes does not matter – Kong Mar 01 '16 at 17:01

1 Answers1

0

row can contain up to 12 columns. You have to count how many item you are creating to correctly create multiple rows with at most 12 columns. The white space may be due to the fact that (accordingly to the screen) you have a single row with 5 div, each with 4 column in lg screen and 6 in sm screens, that is 5*4 = 20 columns in a single row in lg screens and 5*6 = 30 columns in sm screens.

silviagreen
  • 1,679
  • 1
  • 18
  • 39
  • Additional rows will simply slide down and to the left until they reach the left side of the parent container or catch/run into a sibling element on the way. Seems like you are suggesting creating multiple rows with three elements each, if so, this will not help with the whitespace issue. – hungerstar Mar 01 '16 at 16:34