[Resolved] Display 2 column on mobile

[Janne]

Hi.
Can you help me with displaying 2 columns instead of 1 on mobile in the blog? Found this code here. With the code I get two columns, but the two columns is only covering 50 % of the width.

@media (max-width: 767px) {
.mobile-grid-100 {
clear: none;
width: 50%;
}
}

[Leo]

Hi there,

What should happen to the featured post?

Also 50%?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

Do you mean if the featured post also is only half the width? yes.

[Leo]

Try this instead:

@media (max-width: 767px) {
    .generate-columns.mobile-grid-100 {
        clear: none;
        width: 50%;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

It worked, thanks. Is it possible to get some air between the images?
And is it possible to remove some info when on a small screen? For example the categories.

[Leo]

Try this:

@media (max-width: 767px)
    .generate-columns-activated .generate-columns-container {
        margin-left: -40px;
    }
    .generate-columns-container>* {
        padding-left: 40px;
    }
    .generate-columns-container .page-header {
        margin-left: 40px;
    }
    .entry-meta {
        display: none;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

It worked. It hovever looks like the page is wider than what what shows. When we are inside a category page, the title is cut. Check the link in the first post. And is it possible to also remove author and time published?

[Leo]

Edited the CSS above:
https://generatepress.com/forums/topic/display-2-column-on-mobile-2/#post-1233294

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

Thanks, it worked. But is it possible to also remove author and time published?

[Leo]

My CSS above should do that already:
https://generatepress.com/forums/topic/display-2-column-on-mobile-2/#post-1233294

Looks like you didn’t update the last block.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Janne]

Didn`t copy all, sorry. Works like a sharm now! Thanks.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Evenit]

Hi may you help me in display 2 columns in mobile also for my site? I tried your css but doesn’t work for me.
Thanks

[Leo]

Can you open a new topic for your question?

Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts