Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #593381

    Hello. We are using the “blog posts” element in the advanced layout editor. I have it configured to show two columns of blog posts, which looks great on the desktop view, but when it is resized to mobile view, it does not shift to a single column view (it still shows the blog posts as two columns, which makes the images really tiny).

    You can see an example here: http://latitudes.org/behavior-charts/

    Please let me know what css code is required to fix this issue, since I would like the blog posts to go from a two column display to a one column display when viewed on smaller browsers.

    Thanks!

    #594051

    Hi ACNLatitudes,

    Please try the following in Quick CSS under Enfold–>General Styling:

    @media only screen and (max-width: 767px) {
    .page-id-24668 .av_one_half {
        width: 100% !important;
    }
    }

    Regards,
    Rikard

    #595255

    Hi Rikard. Thanks. I just added that code to Quick CSS, but it did not resolve the issue. Please advise.

    #595322

    Hey!

    Please use the below css to collapse the section seen in the screenshot in tablets and mobile

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .slide-entry {
        width: 100%!important;
        margin: 20px 0!important;
    }
    }
    

    Please use the below css to collapse the section seen in the screenshot in mobile only

    @media only screen and (max-width: 480px) {
    .responsive #top #wrap_all .slide-entry {
        width: 100%!important;
        margin: 20px 0!important;
    }
    }

    Best regards,
    Vinay Kashyap

    #595992

    Thanks. I used the code that you provided for mobile and tablets. It seems to work now. However, for some reason it doesn’t look the same as in your screenshot. On my mobile phone (safari browser) and on my desktop computer (resized chrome browser window) the image/text doesn’t line up flush for each post (it shifts to the left or to the right as each blog post alternates): http://snag.gy/Oxh0D.jpg

    Please advise.

    • This reply was modified 4 years, 4 months ago by  ACNLatitudes.
    #596205

    Hi!

    Please add the below CSS in Quick CSS

    @media only screen and (max-width: 767px) {
    .responsive #top #wrap_all .slide-entry {
         margin-left: 0!important; 
    }
    }

    Best regards,
    Vinay Kashyap

    #596446

    Hi Vinnie. That worked perfect! Thanks so much!

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Displaying Blog Posts on Mobile View’ is closed to new replies.