COMMUNITY FORUM

Resposive K2 Columns (itemContainer)

Start
Prev
1
Next
End

Mike Economou
Topic Author
Offline
Junior Member

9 years 1 month ago - 9 years 1 month ago #147432 by Mike Economou

Resposive K2 Columns (itemContainer) was created by Mike Economou

Hi,
I am trying to make some css adjustments in order in category items list I have 3 columns for desktop, 2 for tablets and 1 for mobiles.
So I have removed the ".clr " elemets and I set the widths in CSS Media queries.
Now the problem :
Let's say I have 2 columns, and I have 10 Items so 5 rows.
If the 1st Item of column 1, is Larger in height than the second, then the 3rd one doesn't go below the 1st.
Below the 1st element there is space and the itemContainer shoud be 3rd goes 4th and so on.

The only solution I found so far, is to remove some text from the introtext and make all the text almost the same number of chars.

I hope the screenshots wil help you :
Original : prntscr.com/8gpgl5
After text removal : prntscr.com/8gphiu

I hope you anderstood all the above :p

Is there any solution for that ?

Thank you

Last edit: 9 years 1 month ago by Mike Economou.

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

9 years 1 month ago #147448 by Krikor Boghossian

Replied by Krikor Boghossian on topic Resposive K2 Columns (itemContainer)

If you change the float: left; to display: inline-block; vertical-align: top; margin: 0 -2px; in the .itemContainer class the items will always stack up correctly.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Mike Economou
Topic Author
Offline
Junior Member

9 years 1 month ago #147450 by Mike Economou

Replied by Mike Economou on topic Resposive K2 Columns (itemContainer)

Thank you for your answer but it doesn't work :
prntscr.com/8gy56g

Anyway I found another way to do it in my media queries :

#k2Container {
    .itemList {
      .itemContainer {
  		    width:50% !important;
          &:nth-child(2n+1) {
            clear:left;
          }
      }
    }
}

Please Log in or Create an account to join the conversation.

Krikor Boghossian
Offline
Platinum Member

9 years 1 month ago #147457 by Krikor Boghossian

Replied by Krikor Boghossian on topic Resposive K2 Columns (itemContainer)

You need to remove the float.
If a float is present, other layout options are not respected.

JoomlaWorks Support Team
---
Please search the forum before posting a new topic :)

Please Log in or Create an account to join the conversation.

Start
Prev
1
Next
End