YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar yannis asked

FIX Zoo Blog - UIkit layout items across in mobile

Hi, i hope this will be helpful with the issue of Uikit and Zoo order of items when it comes to mobile. As with this question http://yootheme.com/support/question/54182 i came across with the same issue. This is what i did to solve it.

First step is to choose the number of columns in the Zoo application to 1.
then go to /zoo/applications/blog/templates/uikit/_items.php
in line 47 instead of
echo '<div class="uk-grid" data-uk-grid-margin>';
put
echo '<div>';

and in line 49 instead of
echo '<div class=" uk-width-medium-1-'.$count.'">'.$columns[$j].'</div>';
put this
echo '<div class="uk-flex uk-flex-center uk-flex-wrap uk-flex-wrap-space-between">'.$columns[$j].'</div>';

in media/zoo/applications/blog/templates/uikit/_item.php

wrap the article inside a div so it will be like the following in order flex to apply to the div element

<div>  
<article class="uk-article">  
<?php if ($item) : ?>  
    <?php echo $this->renderer->render('item.teaser', array('view' => $this, 'item' => $item)); ?>  
<?php endif; ?>  
</article>  
</div>

then in custom.css i added the following

@media (max-width:768px){  
.yoo-zoo  .uk-flex .uk-article{  
max-width:500px;  
margin:10px auto;  
}  
}  

@media (min-width: 768px){  
.yoo-zoo  .uk-flex .uk-article{  
max-width:285px;  
margin:10px 10px;  
}  
}

Few changes might have to be done to the code to display the items correctly, but to my layout i have 3 per row in > 768px then drop to 2 per row
and on mobile 1 per row.

If you have any corrections that might be helpful also for me please comment.

  • ZOO
  • UIkit
  • Tutorial

Edited

Know someone who can answer? Share a link to this question via email or twitter.