Display more than 2 article thumbnails on portfolio landing page

naas-it

Hi there

I would like to display more than 2 (ideally 4) of the portfolio article thumbnails on the JA Alpha portfolio landing page, but so far haven't been able to configure this. Do you know where and how to do this? I thought it would be within the blog layout tab as per below but no luck yet.

saguaros

Hi naas-it

You mean this Portfolio page, right? https://ja-alpha.demo.joomlart.com/index.php/portfolio

As your attached screenshot, you can simply change the number of Intro Articles to 4, it will show 4 items on frontend.

Once done, remember to clear cache.

Regards

naas-it

saguaros

Yes that's the page I am referring to. I can get it to display 4 items but I am unable to get it to display 4 items in one a row (as opposed to 2 on one row and 2 on row below).

What exactly needs to be configured to allow achieve this?

saguaros

Hi naas-it

I will share with the team for further checking on this.

Regards

naas-it

saguaros

Just an update on this. I managed to get it working with three per row:

With settings:

But the second I change to columns to 4 it does the following:

Which was what happened originally.

Please advise.

Thanks

saguaros

naas-it Yes, I'm aware of this and already reported this issue to the team. I will update here when it's fixed.

naas-it

saguaros

Thanks!

saguaros

naas-it

Could you backup your site and use this custom css?

.items-intro.cols-4 .item-wrap {
    width: 25%; }
    @media (max-width: 991.98px) {
      .items-intro.cols-4 .item-wrap {
        width: 50%; } }
    @media (max-width: 767.98px) {
      .items-intro.cols-4 .item-wrap {
        width: 100%; } }
    .items-intro.cols-4 .item-wrap .page-header h2 {
      font-size: 18px; }
    .items-intro.cols-4 .item-wrap .item-content {
      padding: 36px; }
      .items-intro.cols-4 .item-wrap .item-content .category-name {
        left: 36px; }
  .items-intro.cols-5 .item-wrap {
    width: 20%; }
    @media (max-width: 991.98px) {
      .items-intro.cols-5 .item-wrap {
        width: 50%; } }
    @media (max-width: 767.98px) {
      .items-intro.cols-5 .item-wrap {
        width: 100%; } }
    .items-intro.cols-5 .item-wrap .page-header h2 {
      font-size: 18px; }
    .items-intro.cols-5 .item-wrap .item-content {
      padding: 18px; }
      .items-intro.cols-5 .item-wrap .item-content .category-name {
        left: 18px; }

naas-it

saguaros

Hi,

I have added the code to the custom.css file but it now it looks like the following (very small):

Ninja

naas-it
Hi
Kindly try this code

.items-intro.cols-4 {width: 100%}
 @media (min-width: 991.98px) {.items-intro.cols-4 .item-wrap { width: 25%;  float:left; } }
 @media (max-width: 768px) { .items-intro.cols-4 .item-wrap {width: 100%; }}

it will make it 4 columns: http://prntscr.com/10s7tmz

naas-it

Ninja

Thank you. That appears to have resolved the issue.