Displaying desktop sidebar widgets in a different location mobile view

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/

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.

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

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>

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?

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

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

You're welcome :)

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

Hi Roman,

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

Thanks!