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

[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.

[Leo]

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/

[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.

[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

[Tom]

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>

[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?

[Tom]

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

[Suzanne]

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

[Tom]

You’re welcome 🙂

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

[Tom]

Hi Roman,

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

Thanks!

[Author]

Posts