Different Sidebar on Desktop Than Mobile

Hi there,

without huge complication and messing with caches, the simplest approach is to use some CSS to hide what you don't want on Mobile.

Try this:

@media(max-width: 768px) {
    .inside-right-sidebar aside:nth-child(3) {
        display: none;
    }
}

This will hide the 3rd widget on mobile. Simply change the nth-child value to target a widget.
If you want to remove multiple widgets you can add multiple selectors delimited with a comma eg.

@media(max-width: 768px) {
    .inside-right-sidebar aside:nth-child(1),
    .inside-right-sidebar aside:nth-child(3) {
        display: none;
    }
}

This will remove 1 and 3.

Brilliant, thanks so much. Is there actually a code I could add to remove the sidebar from mobile completely please? As I've just noticed I don't have a sidebar on the individual posts and that looks fine. That may be the best option for now, in hindsight. Thanks!

Try this:

@media(max-width: 768px) {
    #right-sidebar {
        display: none;
    }
}

Is that to go into the Additional CSC box? Pasted it in there and it doesn't seem to have done anything but feel free to check your end in case it's a cache thing? If not, what else should I try? :)

Hmmm... thats odd as its the correct place. Ok, remove that CSS if its still there and instead, look for this CSS you already have in the Additional CSS box:

@media (max-width: 768px) {
  .top-bar {
    display: none;
  }
}

and change it to:

@media (max-width: 768px) {
  .top-bar, #right-sidebar {
    display: none;
  }
}

Super clever! This has now fixed that. Thank you!

Glad to be of help!