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

Avatar viktor.horst.17 asked

ZOO Multiple Column on mobile not working correct

When I use ZOO Blog with multiple columns (2 columns) and set it to left to right (which is the most logical choice) I get:

Article 1 Article 2
Article 3 Article 4

That is what I expect and want. But when I change the browser window to the mobile size I get this:

Article 1
Article 3
Article 2
Article 4

How is this possible? What can I do to make this work like it should. By this I mean:

Article 1
Article 2
Article 3
Article 4

I hope someone can help me with this.

Greetings Viktor

  • ZOO

Edited

6 Answers

0

Avatar michael.maass Support Online answered

You are perfectly right. As far as I can see the concept might require reconsideration.

I can see you are using a custom ZOO template for your Blog app instance. Did you create it based on the ZOO "UIkit" template?

Depending on what you changed in your customized template the line numbers in the followings steps may differ. But if you edited the PHP files yourself, I take it you will know where to look:

  • Access your site's root via FTP.

  • Navigate into the folder of your custom ZOO template and open this file:
    media/zoo/applications/blog/templates/solar/_items.php
    (Mind the precise name: leading underscore, plural s!)

  • Change line 40 from

    $columns[$column] .= $this->partial('item', compact('item'));
    

    to

    $columns[$column] .= '<article class="uk-article uk-width-medium-1-'.$this->params->get('template.items_cols', 1).'">'.$this->partial('item', compact('item')).'</article>';
    
  • Change lines 47 through 49 rom

    echo '<div class="uk-grid" data-uk-grid-margin>';  
    for ($j = 0; $j < $count; $j++) {  
        echo '<div class="uk-width-medium-1-'.$count.'">'.$columns[$j].'</div>';  
    

    to

    echo '<div class="uk-grid uk-grid-match" data-uk-grid-margin data-uk-grid-match="'."{target:'.uk-article'}".'">';  
        for ($j = 0; $j < $count; $j++) {  
            echo $columns[$j];
    
  • Save and close the file.

  • Now open this file:
    media/zoo/applications/blog/templates/solar/_item.php
    (Mind the precise name: leading underscore, singular!)

  • Change lines 14 through 18 from

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

    to

    <?php if ($item) : ?>  
        <?php echo $this->renderer->render('item.teaser', array('view' => $this, 'item' => $item)); ?>  
    <?php endif; ?>
    
  • Save and close the file.

  • Open the file templates/yoo_uniq/styles/solartechniek/css/custom.css

  • At the very end add exactly the following CSS:

    .yoo-zoo.blog-uikit-custom .uk-article { margin-top: 40px; }  
    .yoo-zoo.blog-uikit-custom { margin-top: -40px; }
    
  • Save and close the file.

  • Configure the app/ZOO Frontpage/Category to Items Order > Down.

Reload the page in the frontend and test the result.

Thank you

Edited

1

Avatar markusb answered

also looked for this issue, thanks for "fix" Michael

I have passed it on to the developers for revision.

any news about that? In 3.3.17 it seems not to be built-in...

Greetings

0

Avatar viktor.horst.17 answered

Hi Michael,

Thanks for the great support. It works!

(I had to set the 'Items Order' from 'Across' to 'Down' to make it work)

Is this issue something that will be looked into by Yootheme?

Greetings Viktor

0

Avatar michael.maass Support Online answered

(I had to set the 'Items Order' from 'Across' to 'Down' to make it work)

Yes, that's something I forgot to mention. I added it to the instructions, in case someone else decides to follow them.

Is this issue something that will be looked into by Yootheme?

I have passed it on to the developers for revision.

Thank you

0

Avatar viktor.horst.17 answered

I have passed it on to the developers for revision.

Is there more news about that? It isn't in the update 3.3.18.

0

Avatar mrjon answered

Hi Michael

Are you able to do the same walk through for the 'Business' application please? It's too different for me to follow the steps for the Blog app.

Thanks

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