On tablet portrait mode Sidebar content below main content in two columns

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

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

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

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

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

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

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

Hi there,

I have the same concern.
Is it possible to combine these 2 solutions:

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

Best regards.
Dominique

Hi Dominique,

Can you open a new topic and link us to your site?
Let me know!

Hi.
I will look for a solution. I'll find it eventually.
Thanks anyway.