Tagged: , , , , , ,

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • October 15, 2013 at 10:21 am #175544
    ttem

    When resizing the grid layout archive pages like this one:

    http://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://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?

    October 15, 2013 at 10:34 am #175549
    ttem

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

    October 15, 2013 at 9:00 pm #176054
    sreepmp

    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

    October 16, 2013 at 8:51 pm #176609
    Yigit

    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 years, 1 month ago by Yigit.
    October 16, 2013 at 10:10 pm #176665
    ttem

    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?

    October 16, 2013 at 10:16 pm #176673
    Yigit

    Hello!

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

    Cheers!
    Yigit

    October 16, 2013 at 11:53 pm #176734
    ttem

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

    October 17, 2013 at 12:48 am #176765
    ttem

    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!

    October 17, 2013 at 1:08 am #176771
    Yigit

    Hello!

    Can you post the link to your website?

    Best regards,
    Yigit

    October 17, 2013 at 1:24 am #176779
    ttem
    This reply has been marked as private.
    October 17, 2013 at 1:33 am #176785
    Yigit

    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

    October 17, 2013 at 2:19 am #176799
    ttem

    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

    October 17, 2013 at 1:42 pm #176990
    Yigit

    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

    October 17, 2013 at 8:40 pm #177160
    ttem
    This reply has been marked as private.
    October 18, 2013 at 3:27 pm #177416
    Yigit

    Hi!

    Please review your website

    Cheers!
    Yigit

    October 18, 2013 at 8:21 pm #177557
    ttem

    Thank you for your help Yigit,

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

    still makes sidebar disappear from mobile (tested on iphone5)

    October 21, 2013 at 4:30 pm #178483
    Devin

    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

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