[Resolved] columns blog page on mobile

[ioan]

Hi there,

Is there a way to remain the blog page with 2 columns and the first post wide on mobile version

Thaks for your theme btw

Osmel

[Leo]

Hi there,

Try this CSS:

@media (max-width: 768px) {
    .generate-columns-container > * {
        width: 50%;
    }
}

[ioan]

Hi Leo, thank you for your answer, this one showed us the way.Your option remain us the blog page with 2 columns on tablet and mobile, but it also affects the first post and we really want it wide. Finally, until the moment, it has worked:

@media (max-width: 768px) {

.generate-columns-container > article {
width: 50%;
}

}

Later we will test it in the live site

Thaks one more time Leo & GP team

Osmel

[Leo]

Glad you got it working!

[ioan]

Grrrr, it was working ok in GP Premium 1.4.x but when update to GP Premium 1.5.5 my first post on blog did not remain wide, it´s also in 2 columns. Any idea? if I find a solution I will post it…

[Leo]

Have you fixed this?

Looks like it’s still working on my phone? https://s33.postimg.org/gpty4hevz/IMG_6801.png

[ioan]

Leo, I haven´t update the live site to GP Premium 1.5.5, that´s why it looks ok. I think that I have a solution last night in my local site using , I need to test it well, if nothing else is broken I will share it for sure.

[ioan]

Sorry, using….:

.generate-columns-container .featured-column { width: 100%; }

[Leo]

Ok let us know.

[ioan]

Done!

@media (max-width: 1030px) { /* Not sure why it dosn´t work in max-width: 768px */

.generate-columns-container .featured-column {
width: 100%; /* keep first post (featured) wide */
}

}

@media (max-width: 768px) {

.generate-columns-container > article {
width: 50%; /* next post after the first one in two columns on tablet and below */
}

}

Now our live site is updated with WP 4.9 and GP Premium 1.5.5
http://www.eventosortet.com/blog/

Greatings

[Leo]

Thanks for sharing the solution!

[Author]

Posts