Change Number of Columns on Site Landing Page

I have seen the post on how to change how many course cards are displayed on one page, but this does not achieve what I'd like to create.

While I can change the number of course cards to 4, they are still displayed in three columns across and the 4th course card is displayed in the center column below the first row.

How can I change the number of columns for course cards on the site landing page? For instance, if I only have 4 courses total, how can I get them to display in two rows of two course cards each?

3 people have this question

Hi there!

Thanks for getting in touch.

Changing how many cards are displayed is not as much of a quick and easy change as changing the pagination - unless you're familiar with HTML/CSS I would strongly recommend having a designer do this for you.

Do you have designer or front-end developer available to give you a hand with this?

Many thanks,


No, we don't have a designer helping us out.  

I thought it might be an easy fix. But I guess we'll just leave it as it is.

Thanks much.


Let me check in with our designer on this for you and I'll send you an email with some more information once I have it :)



2 people like this

HI was just checking in if there was an easy fix to customize how many course cards are shown on the landing page. I have one course that shows on the second page and I am concerned people wont notice there is a second page. 



Hi Mark,

There is! Check out this article for some instructions:



Hey id love to change my column no as well did anyone every get the answer or code .

1 person likes this

Hi Christine 

Have you had a chance to review this article? -

Thank you!

I want to change the site landing page for my site which does not look anything like the code I'm seeing above.

Essentially, I've found the tag that refers to the classes that need to be modified:

<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">

When I go into Theme.css and try to edit the code to display 4 columns instead of three above a minimum screen width I get a useless jumble of a layout.

The styles I'm attempting to add are below:
@media (min-width: 1200px) {

  .col-lg-4 {

    width: 25%;



@media (min-width: 992px) {

  .col-md-4 {

    width: 25%;



Hi Brian

That sounds a bit more complicated than need be and it may be best to send an email into along with a screenshot of what you want to change (ie annotate the screenshot) and then we can provide a bit more information however do be aware that Theme customization via the HTML code is not something we readily complete for customers.

Login to post a comment