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

    The issue is mobile layout (less than 767px width) of the 3 column grid like on this page http://www.kriesi.at/themes/enfold/blog/blog-grid/

    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

    #183946

    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%; }

    Regards,
    Yigit

    #183995

    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!

    #184754

    Hey!

    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; }

    Regards,
    Yigit

    #184900

    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.

    #184912

    Hey!

    Can you post the link to your website?

    Cheers!
    Yigit

    #184916
    This reply has been marked as private.
    #185718

    Hi!

    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;
    }}

    Regards,
    Yigit

    #185950

    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;}

    #185963

    Hey!

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

    Regards,
    Yigit

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.