Tagged: mobile view
-
AuthorPosts
-
March 4, 2016 at 5:24 pm #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!
March 7, 2016 at 5:09 am #594051Hi 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,
RikardMarch 9, 2016 at 1:22 am #595255Hi 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 #595322Hey!
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 KashyapMarch 10, 2016 at 1:21 am #595992Thanks. 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, 8 months ago by ACNLatitudes.
March 10, 2016 at 10:50 am #596205Hi!
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 KashyapMarch 10, 2016 at 6:10 pm #596446Hi Vinnie. That worked perfect! Thanks so much!
-
AuthorPosts
- The topic ‘Displaying Blog Posts on Mobile View’ is closed to new replies.