fitting two blog posts per page

Hi Guys,

I was wondering how can i change the layout of my site here at http://surf.radiocompetitions.net so it shows two columns of blog posts instead of one?

Thanks guys
jonathanduane2010Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jonathanduane2010Author Commented:
password to the site is "iradio102107"
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Please create a sample page that the public can view.  Alternatively you can paste only the relevant html/css code or render the html on jsfiddle.com or jsbin.com.   Your question and code samples should be available well after you close out the question in order to help others that have the same issue.  This is why we will not work from a password protected site.
jonathanduane2010Author Commented:
ok i will take the password off, thanks Scott..

Also, at the moment its using a shortcode to display latest article, i was wondering if anyone knew of a way where it could display article using post id ?

sorry, about this
jonathanduane2010Author Commented:
Hi scott,

I was able to find the css to fit two blogs per page! i found it in the bootstrap folder!

But seeing as you helped i would be happy to award you the points?
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your site is using bootstrap responsive css grid http://getbootstrap.com/css/#grid

If you are on a small screen you will see one column, if you are on a wider screen you will see two columns.

A shortened version of bootstrap code for 2 columns would be

<div class="row">
    <div class="col-sm-6">left/top</div> 
    <div class="col-sm-6">right/bottom</div> 
</div>
<div class="row">
    <div class="col-sm-6">left/top</div> 
    <div class="col-sm-6">right/bottom</div> 
</div>

Open in new window

In the above code when the screen is above 750px you will see 2 rows of 2 columns.  When it goes below 750px, the rows will collapse and you will see 4 rows of 1 column.  This keeps the content readable.  

If you keep 2 columns for the phone, then the text shrinks and it is hard to read.

The quick fix would be to change col-sm-6 to col-xs-6 and that way you will always be at 2 columns.

In bootstrap, there are 12 columns and the problem your code has is instead of col-sm-6 you have col-sm-7.  The numbers have to add up to 12 or less. When it is over like this you end up with odd results.

You are using themefuse theme and their docs can be accessed by logging in to their site. Once you do head to http://docs.themefuse.com/paws-and-claws.  There are a few different ways you can set up the columns by using the builder, settings or code on the page when add text to the text box. They have code that converts to bootstrap classes.  It probably looks something like [col sm 6] and it is probably generated from a shortcode.  I have a themefuse theme I can get access to later and see exactly how it is done.

If you view the source from the original theme, http://demo.themefuse.com/paws-and-claws/ notice that in the rows as I described above, their columns add up to 12.  If the left column is "col-sm-7" then the right side is "col-sm-5".  I think you may have copy and  pasted and that may be part of the issue.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.