Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • March 4, 2016 at 5:24 pm #593381
    ACNLatitudes

    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!

    March 7, 2016 at 5:09 am #594051
    Rikard

    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

    March 9, 2016 at 1:22 am #595255
    ACNLatitudes

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

    March 9, 2016 at 6:30 am #595322
    Vinay

    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

    March 10, 2016 at 1:21 am #595992
    ACNLatitudes

    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 8 years, 9 months ago by ACNLatitudes.
    March 10, 2016 at 10:50 am #596205
    Vinay

    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

    March 10, 2016 at 6:10 pm #596446
    ACNLatitudes

    Hi Vinnie. That worked perfect! Thanks so much!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Displaying Blog Posts on Mobile View’ is closed to new replies.