Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #183108

    The issue is mobile layout (less than 767px width) of the 3 column grid like on this page

    What currently happens in mobile smart phone view is rows get stacked 1 large 100% width then 2 thumbnail 50% items next row then 1 large repeating….

    the items should be consistent and display as 2 columns of 50% – so 2 per ‘row’
    note the 4 column grid layout does display in this way 2 columns in mobile

    Not sure if the 100% – 50% layout was intentional but This is not the correct representation of items in a category: ‘favoring’ (full width) some items over others (half width)

    What are the css changes to make the 3 column grid 2 columns in mobile smartphone view

    Thank you for your help


    Hi ttem!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    .responsive #top .avia-content-slider-odd .slide-entry.first { width: 48%; }



    Hi Yigit
    Thank you, that does partially solve it: all items are same size now though this is still displaying 1 item on first row 2 on second and so on…
    How to fix this?
    also the css mods should only be targeting @media max width 767px so as not to affect ipad/tablet layout
    Thank you for your help!



    Please add following code to Quick CSS as well

    .responsive #top .avia-content-slider-odd .slide-entry.slide-parity-even { clear: none;
    margin-left: 4%; }
    .responsive #top .slide-entry { margin-left: 0; clear: both; }



    Thanks Yigit!
    I think there’s still one step missing.

    The 2 rows of 3 ‘sildes’ going across number
    1 – 2 – 3
    4 – 5 – 6:
    Number 3 correctly moves down below 1 but number 4, the first slide of the second row is not moving up to right of 3
    Then 5,6 are correct and the pattern synchronizes and should repeat fine once slide 4 is in correct position.



    Can you post the link to your website?


    This reply has been marked as private.


    The problem is, there are entry wraps after each 3rd post. But if you would like to display them in one column, please undo custom CSS code i provided earlier and add following instead

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



    Thanks for trying YIgit,
    Ok I see that won’t work then.
    I guess I will have to go with the 4 column grid layout as that adjusts nicely to 2 columns in mobile.

    I adjusted the layout margins which allows the images to be larger and sidebar wider as well.
    Here’s the custom CSS hopefully this will be of use to someone:

    div .av_one_fourth { margin-left: 2.6%; width: 23%;}
    .content .entry-content-wrapper {padding-right: 25px;}
    .inner_sidebar {margin-left: 25px;}



    You are welcome and thanks for sharing! Let us know if you have any other questions or issues.


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

The topic ‘How to adjust Blog posts grid 3 column to 2 column layout mobile phone view’ is closed to new replies.