Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
  • #175544

    When resizing the grid layout archive pages like this one: (3 columns)

    to mobile width(iphone etc), the items from the 3 columns should display above one another in one column (rather than the alternating 1 large thumbnail item, 2 smaller thumbnails items)

    The shop page: the 3 columns adjusts this way to 1 column for mobile width

    How can I make this change to the 3 column grid layout?


    or adjust to 2 columns of smaller thumbnails(preferable) like the shop page on mobile horizontal layout


    Also side bar (with Grid) is not at all getting displayed in mobile view. I have “Search/Categories/Recent comments etc” on my side bar. I would like to see “Search” function under Menu and all others under posts in mobile view. Appreciate your help in resolving these mobile view issues.




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

    @media only screen and (max-width: 480px) { .responsive #top .slide-entry { width: 100%; } }


    • This reply was modified 4 years ago by  Yigit.

    Thank you Yigit,

    While this does fix the mobile layout, the 100% width is also being applied to all other screen sizes so that all all items are 100% width. How can I apply this to only mobile?



    I updated the code in my previous code. Please add that code



    Thanks Yigit, Great that works perfectly!

    I have discovered the default behavior for mobile is to make sidebar disappear- this is not desirable as there are elements in the sidebar which are necessary for the site usability.

    Can you please give me some direction to have the sidebar display below the main content?

    Thank you for your help!!


    Ok found solution for displaying sidebar on mobile from another thread:

    @media only screen and (max-width: 767px) {
    .responsive .template-blog .blog-meta,
    		.responsive .post_author_timeline,
    		.responsive #top #main .sidebar {display:block; }

    Only problem is the vertical border that separates main content & sidebar is displaying to the left of the sidebar.

    I have tried to remove the border with @media css styles – but no success

    Any idea how to remove the border and padding?

    Thank you for your help!



    Can you post the link to your website?

    Best regards,

    This reply has been marked as private.


    Please add following code to Quick CSS as well

    @media only screen and (max-width: 767px) { #top #main .sidebar { border-left-style: none; }
    .content { border-right-style: none; } }

    Do not forget to flush browser cache after applying custom css :)



    Adding that css removes the entire sidebar for some reason….

    To make sure it wasn’t a caching issue, I removed the above code and sidebar reappears



    Do you mind creating a temporary admin login and posting it here privately so i can login and take a look?

    Best regards,

    This reply has been marked as private.


    Please review your website



    Thank you for your help Yigit,

    #top #main .sidebar { border-left: none!important; }

    still makes sidebar disappear from mobile (tested on iphone5)



    Go ahead and update to 2.4 which was released last night. The theme now has an option to show or hide sidebars on mobile from the theme options.


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

The topic ‘Grid layout 3 column to mobile should be one column’ is closed to new replies.