K2 category list of items

Hi I have two problems with item from this category view http://swiatloczula.nazwa.pl/new/index.php/o-nas/tworcy

1) When I make the window smaller responsive pictures are getting too small and I still have 3 columns layout grid. I would like to have only one/two columns on mobile the same way it's done in joomla category blog layout:
http://swiatloczula.nazwa.pl/new/index.php/o-nas/nasza-ekipa-menu

2) I need to define image of the item as a "dominant part" of the row, instead of the title. So when the title has more then one line ten it goes upper and does't put the picture below (you can find it on second half of the category at "KATARZYNA SOBAŃSKA I MARCEL SŁAWIŃSKI" item)

Hi

1. Please add this to mobile.css:

Code: Select all

.itemContainer {
    float: none;
    width: 100% !important;
}


2. I do not understand what You mean. Can You please explain it a little better ?

Hi,
I'm sorry for not being clear. I'll try to explain myself better

1) I add this and it works fine but what if one day I install some template updates? Won't this rule disappear? Shouldn't I put it inside of override.css?

2) I would like to have items in 3 columns, where each row has a picture on the same line/hight.
Now only text keeps the same line, so when it's too long (2 lines) it puts the image lower like on the picture:

Hi

1. Some changes are harder to separate, but sure move it to override.css, but make it looks like this than:

Code: Select all

@media only screen and (max-width:HERE-GOES-WIDTH-OF-IPHONE-LAYOUT-SPECIFIED-IN-TEMPLATE-SETTINGSpx) {
.itemContainer {
    float: none;
    width: 100% !important;
}
}


2. Add this to css to make all titles wait for 2 lines:

Code: Select all

article header.nodate {
    min-height: 75px;
}


1) it's solved- thank you a lot!
2) Is this the only way? Now one line titles has too big margin from the photo. If there is no simple way of changing css I will have to separate them as to different items to keep titles shorter...

Hi

1. Great

2. I'm afraid so. The only other solution I may think of is to do the oposite and not lock title to 2 lines but restrict to 1 only by cutting the rest of the text with this code:

Code: Select all

article header.nodate {
    max-height: 45px;
    overflow: hidden;
}


Close, but now the picture goes over the title. Well I will just separate them. Thank you anyway!

Hi

They should not go over images with overflow:hidden. maybe it needs a small adjustment:

Code: Select all

article header.nodate {
    max-height: 45px;
    overflow: hidden !important;
    display: block;
}


Hi,

Hi, I just moved the title - under the picture.

In components/com_k2/templates/default/category_item.php

Find and cut:

<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
<!-- Item Image -->
<div class="catItemImageBlock">
<span class="catItemImage">
<a href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<img src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
</a>
</span>
<div class="clr"></div>
</div>
<?php endif; ?>


next paste it beteween (about line 24 in my case):

<!-- K2 Plugins: K2BeforeDisplay -->
<?php echo $this->item->event->K2BeforeDisplay; ?>


-----> HERE!


<div class="catItemHeader">
<?php if($this->item->params->get('catItemDateCreated')): ?>
<!-- Date created -->



For me works just fine

Hi

Thank You for shearing solution with us