Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] columns blog page on mobile

Home Forums Support columns blog page on mobile

  • This topic has 10 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #430569
    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

    GeneratePress 1.4
    GP Premium 1.5.4
    #430734
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    @media (max-width: 768px) {
        .generate-columns-container > * {
            width: 50%;
        }
    }
    #431474
    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

    #431650
    Leo
    Staff
    Customer Support

    Glad you got it working!

    #431820
    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…

    #431978
    Leo
    Staff
    Customer Support

    Have you fixed this?

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

    #432490
    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.

    #432492
    ioan

    Sorry, using….:

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

    #432768
    Leo
    Staff
    Customer Support
    #432826
    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

    #432836
    Leo
    Staff
    Customer Support

    Thanks for sharing the solution!

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.