Tagged: , , , , , ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • October 31, 2013 at 9:24 pm #183108
    ttem

    The issue is mobile layout (less than 767px width) of the 3 column grid like on this page http://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

    November 3, 2013 at 4:55 pm #183946
    Yigit

    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

    November 3, 2013 at 8:09 pm #183995
    ttem

    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!

    November 5, 2013 at 2:22 pm #184754
    Yigit

    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

    November 5, 2013 at 7:39 pm #184900
    ttem

    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.

    November 5, 2013 at 8:03 pm #184912
    Yigit

    Hey!

    Can you post the link to your website?

    Cheers!
    Yigit

    November 5, 2013 at 8:09 pm #184916
    ttem
    This reply has been marked as private.
    November 7, 2013 at 5:29 pm #185718
    Yigit

    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

    November 8, 2013 at 2:16 am #185950
    ttem

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

    November 8, 2013 at 2:57 am #185963
    Yigit

    Hey!

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

    Regards,
    Yigit

  • Author
    Posts
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.