[Resolved] Displaying desktop sidebar widgets in a different location mobile view

Home Forums Support Displaying desktop sidebar widgets in a different location mobile view

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #341597
    Suzanne

    Hi,
    I have 3 widgets currently setup as left sidebar widgets in both desktop and mobile views. This is the format I’d like to keep for the desktop view.

    I would like to change the mobile(phone) view to display them in this stacking order:
    Logo
    Menu
    Widget 1
    Widget 2
    Widget 3
    Body content

    Here is the link to my existing site: https://tinyurl.com/h94tt6d
    Here is a link to a mockup of what I’m trying to achieve: https://tinyurl.com/y9z2hhn9

    What do I need to modify? Thanks in advance.

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #341602
    Leo
    Staff
    Customer Support

    Hi there,

    Can you give this CSS a shot?

    @media (max-width: 768px) {
    	.site-content {
    		display: -webkit-box;
    		display: -moz-box;
    		display: -ms-flexbox;
    		display: -webkit-flex;
    		display: flex;
    		-webkit-flex-flow: row wrap;
    		flex-flow: row wrap;
     	}
        
    	#left-sidebar {
    		-webkit-box-ordinal-group: 1;
    		-moz-box-ordinal-group: 1;
    		-ms-flex-order: 1;
    		-webkit-order: 1;
    		order: 1;
    	}
        
    	.content-area {
    		-webkit-box-ordinal-group: 2;  
    		-moz-box-ordinal-group: 2;     
    		-ms-flex-order: 2;     
    		-webkit-order: 2;  
    		order: 2;
    	}
    }

    Adding CSS: https://docs.generatepress.com/article/adding-css/

    #341605
    Suzanne

    Hi, I don’t want the entire left sidebar to be in the new location for mobile, only the first three widgets. The first three widgets have the green arrows and text. The remaining left sidebar widgets can stack at the bottom as usual.

    #341718
    Suzanne

    Hi,
    So I put the code into my CSS and all the sidebar widgets are now in my mobile display. Any ideas how to only place the first three widgets at the top? The first three widgets have the green arrows and text. The remaining left sidebar widgets can stack at the bottom as usual.

    Thanks for your help,
    Suzanne

    #341763
    Tom
    Lead Developer
    Lead Developer

    Hi Suzanne,

    I’m afraid there’s no simple way to do that.

    You would need to add the widget content into a hidden div using GP Hooks, and show that div on mobile only:

    <div class="hide-on-desktop hide-on-tablet">
        Mobile content in here
    </div>
    #341950
    Suzanne

    Fantastic, thank you! That worked to display the widgets in the location I need.

    The sidebar widgets are still appearing in mobile stacked below the content and I don’t want them to show there in the mobile version. How do I hide?

    #342027
    Tom
    Lead Developer
    Lead Developer

    You can use a plugin like this: https://wordpress.org/plugins/widget-css-classes/

    Then give the widgets you want to hide on mobile this class: hide-on-mobile

    #354176
    Suzanne

    Hi, I finally had time to circle back and work on this. IT WORKED! Thank you so much for your support!

    #354372
    Tom
    Lead Developer
    Lead Developer
    #354417
    Roman

    Hi Tom, as you know I use media queries for hiding sidebars at certain breakpoints while maintaining average line length (see CSS below). I wonder how to move (display) sidebars to (in) footer widgets using GP hooks at points where I hide them. I use Content Aware Sidebars plugin but it doesn’t allow media queries and I don’t want to use other plugin. Also I don’t want to use flexbox.


    @media
    screen and (max-width: 1395px) {
    .widget-area.grid-20 {
    width: 21%;
    }
    .widget-area.grid-25 {
    width: 25%;
    }
    .content-area.grid-55 {
    width: 54%;
    }
    }


    @media
    screen and (max-width: 1335px) {
    .widget-area.grid-20 {
    width: 20%;
    }
    .widget-area.grid-25 {
    width: 26%;
    }
    .content-area.grid-55 {
    width: 54%;
    }
    }


    @media
    screen and (max-width: 1200px) {
    .widget-area.grid-20 {
    display: none;
    }
    .widget-area.grid-25 {
    width: 30%;
    }
    .content-area.grid-55 {
    width: 70%;
    }
    .tablet-push-20 {
    left: initial;
    }
    }


    @media
    screen and (max-width: 1000px) {
    .widget-area.grid-20 {
    display: none;
    }
    .widget-area.grid-25 {
    display: none;
    }
    .content-area.grid-55 {
    width: 100%;
    }
    .tablet-push-20 {
    left: initial;
    }
    .one-container.both-sidebars .site-main,
    .one-container.both-right .site-main {
    margin:0;
    }
    }

    #354673
    Tom
    Lead Developer
    Lead Developer

    Hi Roman,

    I’m not too sure what you mean – any chance you can open a new topic with some more info/examples?

    Thanks!

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