Turn off sidebar for mobile?

RapidWeaver Classic
1

Is there a way to turn off sidebar for mobile / per page ?

I’m using themeflood - thank you !

2

If you tag @willwood he’ll likely respond here. The alternative is to contact Themeflood support here.

3

Specifically which ThemeFlood theme are you using? There are over 78 theme designs.

Although it would be easy enough to turn off a sidebar below a certain breakpoint screen width using CSS max-width properties, the exact CSS code is going to vary drastically. Depending on the theme, version, settings and other other modifications already present.

4

Hi Will

I use the excellent Boutique 4. I’m working on improving seo on my clients site. … It’s a live project I’ve set myself in order to learn more about seo whilst otherwise quiet.

Seo is a subject that has always frustrated me sideways.

It struck me that the sidebar adds very little for its overhead on mobile in this case - and would like to try turning it off (for select pages) on dibleymarine.com

(Only problem I see with this is that the mobile menu for ‘sail’ is too short for the number of sub-pages it contains.

Its drop-list is currently echoed in the sidebar - thus it’s been non- critical.

So ideally - I may also need to allow for more pages under sail on mobile … if that’s possible).

Thanks for your time Will - I know how much heart you put into this stuff.

Jol

5

Hi @jbob

For the Boutique theme, I have taken a look at your website and this custom CSS code should do what you need:

/* Hide sidebar on screens < 568px wide */
@media (max-width: 568px) {
    #aside {
        display: none !important;
    }
}

Here is a mobile (iPhone) simulation showing what that code does:

2024-03-31-190110_1920x1080_scrot
2024-03-31-190110_1920x1080_scrot1920×1080 601 KB

This CSS can either be entered into Settings > Code > CSS if you want it applied to every page of the website.

Alternatively you can enter it in Page Inspector > HTML > CSS if you only need it to take effect on a few pages.

568px is often considered the theoretical boundary breakpoint between mobile and tablet. This is what Bootstrap and a couple of other frameworks use. However if you would prefer to change that figure, it is safe to do so.

I’ll private message you my contact details in case you need further help with this or other aspects of your website.