Hide right sidebar on mobile

werunhsvwerunhsv United StatesRegistered Users Posts: 19 Big grins

Looking to hide the right sidebar on this page.
Found some code that hides it and the breadcrumb on both pc and mobile. How do I modify to just hide just the sidebar on the mobile?

  • Hides Right Sidebar, Centers Content
  • and Hides Breadcrumbs
  • on VMI Folder and Galleries
    ************************************************/
    .sm-page-parentnode-5ZmdX .sm-page-widget-nav,
    .sm-page-parentnode-5ZmdX .sm-page-widget-content,
    .sm-page-node-5ZmdX .sm-page-layout-region-right,
    .sm-page-parentnode-5ZmdX .sm-page-layout-region-right,
    .sm-page-node-5ZmdX .sm-gallery-cover .sm-breadcrumbs,
    .sm-page-parentnode-5ZmdX .sm-gallery-cover .sm-breadcrumbs {display: none;}

.sm-page-node-5ZmdX .sm-page-layout-region-center,
.sm-page-parentnode-5ZmdX .sm-page-layout-region-center {margin-right: auto !important;}

.sm-page-node-5ZmdX .sm-gallery-cover,
.sm-page-parentnode-5ZmdX .sm-gallery-cover {margin: 0 auto;}

.sm-page-parentnode-5ZmdX .sm-gallery-images {text-align: center;}

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins
    edited November 18, 2021

    This will hide it on screens 736px or smaller:

    /*
    * Hides Right Sidebar on Screens 736px or Smaller
    ************************************************************/
    @media ( max-width: 736px ) {
    
      .sm-page-node-5ZmdX .sm-page-layout-region-right,
      .sm-page-parentnode-5ZmdX .sm-page-layout-region-right {display: none;}
    
    }
    
  • werunhsvwerunhsv United StatesRegistered Users Posts: 19 Big grins
    edited November 18, 2021

    Thanks for the quick response!
    I copied this onto the keyword search page, and it still has the right sidebar visible. I changed the 736 down to 10 and up to 2500 and it only goes away on the large screen, never does on the phone. What am I doing wrong?
    Here is the page with the code on it.

  • werunhsvwerunhsv United StatesRegistered Users Posts: 19 Big grins

    Thanks for the quick response!
    I must be doing something wrong, as it is not working. I pasted the code into the keyword search page and changed the 736 to 10 and 2500. The right sidebar remains on the phone with all of the values. It does disappear from the pc screen when I bump it up to 2500.
    Here is the page that has the code on it. https://www.werunracephotos.com/keyword/n-5ZmdX/313,OBH21/

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins
    edited November 18, 2021

    For some reason when I tried it I thought it worked, but my eyes were seeing things. This should work...

    /*
    * Hides Right Sidebar on Screens 736px or Smaller
    ************************************************************/
    @media ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-node-5ZmdX .sm-page-layout-region-right,
      .sm-user-ui .sm-page-parentnode-5ZmdX .sm-page-layout-region-right {display: none !important;}
    
    }
    
  • werunhsvwerunhsv United StatesRegistered Users Posts: 19 Big grins

    Added it just as your site shows, click done and then done again on the create theme page. It will not save it on that page, so I try to exit and it says you have changes that have not been saved. Very interesting. . . . I'll try to reboot and do it again.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins

    @werunhsv said:
    Added it just as your site shows, click done and then done again on the create theme page. It will not save it on that page, so I try to exit and it says you have changes that have not been saved. Very interesting. . . . I'll try to reboot and do it again.

    Sorry, I changed my response after you posted. If you copy this, it should work:

    /*
    * Hides Right Sidebar on Screens 736px or Smaller
    ************************************************************/
    @media ( max-width: 736px ) {
    
      .sm-user-ui .sm-page-node-5ZmdX .sm-page-layout-region-right,
      .sm-user-ui .sm-page-parentnode-5ZmdX .sm-page-layout-region-right {display: none !important;}
    
    }
    
  • werunhsvwerunhsv United StatesRegistered Users Posts: 19 Big grins
    edited November 18, 2021

    Got stuck here: Clicked on DONE but does nothing.

  • werunhsvwerunhsv United StatesRegistered Users Posts: 19 Big grins

    So, it would not let me copy it into the site wide, but did under All Galleries and it WORKS!
    Thanks so much.
    Next step is to modify that page when viewed in mobile, to have the download icon and have it actually say download. It works right on the full screen, but can't get it on the mobile to show up.

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaRegistered Users Posts: 5,311 Major grins

    @werunhsv said:
    Next step is to modify that page when viewed in mobile, to have the download icon and have it actually say download. It works right on the full screen, but can't get it on the mobile to show up.

    Looks like it's the same page you've been working on (the Keyword page).

    If you need help with the download icon, create a new thread. B)

  • werunhsvwerunhsv United StatesRegistered Users Posts: 19 Big grins

    I will, thanks again for your help!

Sign In or Register to comment.