Dividing a row into two columns

Hi, I hired a guy to help set up my website. When he delivered it I asked for a few changes but he stopped responding. I had already paid him, so I guess he was done. Poor customer service!

Anyways, the site is set up at gagehomes1.fastlanemediallc.com, and I’m trying to turn the gallery section below the header into two different columns, one being Gallery, and the other being Available Properties.

He did it all within the front-page.php file, and unfortunately I know very little (ok nothing…) about PHP.

This is the code for it:
[php]

Gallery

<?php $args = array( 'post_type' => 'gage_gallery', 'posts_per_page' => 4 ); $loop = new WP_Query( $args ); while ( $loop->have_posts() ) : $loop->the_post(); ?>
<?php if ( has_post_thumbnail()) { ?> <?php the_post_thumbnail('gal-size'); ?> <?php } else { echo ''; } ?>
<?php the_title(); ?>
$<?php the_field('gal_price'); ?>
<?php endwhile; ?>[/php]

Can anyone help me turn this into 2 columns?

First of all I think either

should be outside the while-loop or the close
tag for it should be before the else in the if then else statement.

Then it looks like there’s some kind of grid system is being used, so in the

maybe something like
. Though that is just a guess, for I don’t know what the css class desc is doing. It’s not so much as a php problem, but an HTML/CSS problem in my opinion. Maybe this will help you out a little? Maybe not, if not post back or maybe someone else has a better possible solution? Even though the guy you hired bailed on you, it does look like he knew what he was doing.

Your code is using Bootstrap CSS. You can learn more about it here: http://getbootstrap.com/

If you need another programmer, I am available for hire. I am quite familiar with Bootstrap.

it looks like there's some kind of grid system is being used

@Strider, Your right, a grid system is used in Bootstrap.

Justin,
Yes, you are using a Bootstrap system as the others said. Bootstrap displays are set up on a 12 grid
type of system. It uses 12 grids across the page. Using smaller grids, such as two 6-grid groups would
fill in the page across the display. Looking at the Bootstrap page, you will have to locate the area that
explains how to do that. Here is the link to the layouts to give you more ideas on how you would want
to use it: http://getbootstrap.com/examples/grid/

One issue is that it can be a little tricky to implement it as you have to fully understand your current code
and how it all interacts with the grid system.

BUT, you might want to consider Bootstrap TAB systems instead. Where you current have the two titles
of “gallery” and “current properties”, you could alter these into tabs instead of two cols. In this way the
user would click on one of the titles and the corresponding content would appear below the title. Here is
a link to how Bootstrap TABs work. They are very easy to set up and we can help you with it if you decide
to use that option. http://getbootstrap.com/components/#nav-tabs
( To use TABs, you handle the title tabs first, you would only have two. They hide or unhide a

when
they are clicked. The content of the
selected then shows up below. It works very well and I have
used them in many ways. I have even nested them using multiple layers and fancy data inside of the tab
titles. )

Well, Justin, hope this helps…

Oh, sorry, forgot to add…

The reason I was mentioning tabs instead of two cols is that the tab system allows you to have full
with of the page for each of the tabs. So, the gallery can be the full width of the page and also the
current properties would be the full width of the page. (With only one showing at a time.) This would
give you more “landscape” for each of the content in the tabs. Good luck!

Sponsor our Newsletter | Privacy Policy | Terms of Service