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

    When resizing the grid layout archive pages like this one:

    http://www.kriesi.at/themes/enfold/blog/blog-grid/ (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: http://www.kriesi.at/themes/enfold/shop/ the 3 columns adjusts this way to 1 column for mobile width

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

    #175549

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

    #176054

    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.

    Regards
    Sree

    #176609

    Hello!

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

    Regards,
    Yigit

    • This reply was modified 11 months, 2 weeks ago by  Yigit.
    #176665

    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?

    #176673

    Hello!

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

    Cheers!
    Yigit

    #176734

    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!!

    #176765

    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!

    #176771

    Hello!

    Can you post the link to your website?

    Best regards,
    Yigit

    #176779
    This reply has been marked as private.
    #176785

    Hi!

    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 :)

    Cheers!
    Yigit

    #176799

    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

    #176990

    Hello!

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

    Best regards,
    Yigit

    #177160
    This reply has been marked as private.
    #177416

    Hi!

    Please review your website

    Cheers!
    Yigit

    #177557

    Thank you for your help Yigit,

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

    still makes sidebar disappear from mobile (tested on iphone5)

    #178483

    Hi!

    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.

    Regards,
    Devin

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.