[Support request] On tablet portrait mode Sidebar content below main content in two columns

Home Forums Support On tablet portrait mode Sidebar content below main content in two columns

  • This topic has 7 replies, 2 voices, and was last updated 3 weeks ago by David.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1427088
    Frank Tuerpitz

    Hi,
    is it possible if have the tablet in portait mode to show the Right Sidebar content in two columns below the Main content. For example if i have 4 Widgets in the sidebar Widget 1 and 2 is in the left column and Widget 3 and 4 is on the Right column below the Main content.

    Best regards
    Frank

    #1427435
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    @media (max-width: 1024px) and (min-width: 769px) {
        .inside-right-sidebar {
            display: flex;
            flex-wrap: wrap;
        }
        .inside-right-sidebar .widget {
            width: 50% !important;
        }
        .inside-right-sidebar .widget_search {
            width: 100% !important;
        }
    }
    #1427451
    Frank Tuerpitz

    Hi David,

    thank you for your reply.

    With your CSS on my ipad pro 10.5 the sidebar ist still on the rigth side of the content and with two Widgets side by side within the sidebar.
    So for the solution of this topic the sidebar content should be below the main content (and before the footer).

    Best regards
    Frank

    #1427735
    David
    Staff
    Customer Support

    try changing the max-width in the media query to 1000px:

    So this:

    @media (max-width: 1024px) and (min-width: 769px) {

    becomes:

    @media (max-width: 1000px) and (min-width: 769px) {

    #1427822
    Frank Tuerpitz

    Hello David,
    no change. 🙁
    With this css Code

    /*@media (min-width: 769px) and (max-width: 1024px) {
    .content-area, .inside-footer-widgets>div, .sidebar {
    float: none;
    width: 100%;
    left: 0;
    right: 0;
    }
    the sidebar is below the content in tablet portrait mode as i want it, but one Widget follows the other and it takes too much space on the webside. So my idea is to make two columns for the widgets to save space. This behavior i know from another theme.
    Best regards
    Frank

    #1427976
    David
    Staff
    Customer Support

    Remove that CSS and try this:

    @media (max-width: 1024px) and (min-width: 600px) {
        .inside-right-sidebar {
            display: flex;
            flex-wrap: wrap;
        }
        .inside-right-sidebar .widget {
            width: 50% !important;
        }
        .inside-right-sidebar .widget_search {
            width: 100% !important;
        }
    }
    #1433794
    Frank Tuerpitz

    Hi David,
    no change.
    I think your css code rules the behaviour inside the sidebar, because inside the sidebar the search widget has 100% width and the other widgets have 50% width and they have the display flex behaviour but inside the sidebar.
    Additional i need that only in tablet portrait mode the sidebar is no more a sidebar but each widget is a block below the main content with 50% width and the display flex behavior. It should be similar to the smartphone view with the difference each widget has now 50% width with display flex behaviour.

    This behaviour i want only in tablet portrait mode:

    *******************************
    * content *
    *******************************
    * widget 1 * widget 2 *
    * * *
    *******************************
    * widget 3 * widget 4 *
    * * *
    *******************************
    * footer *
    *******************************

    actual smartphone view:

    ******************************
    * content *
    ******************************
    * widget 1 *
    ******************************
    * widget 2 *
    ******************************
    * widget 3 *
    ******************************
    * widget 4 *
    ******************************
    * footer *
    ******************************
    Best regards
    Frank

    #1434194
    David
    Staff
    Customer Support

    I tested it – and it is working but it just needed the media query to be adjusted.
    Remove all current CSS and use the Update CSS here:

    https://generatepress.com/forums/topic/on-tablet-portrait-mode-sidebar-content-below-main-content-in-two-columns/#post-1427976

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.