Set mobile responsive breakpoint

cherryfivers

Hello! I have searched the forums but cannot seem to find an answer to the following question: I would like to manually control the pixel width when the mobile responsive layout of my web page kicks in. For example, right now, the NAV layout seems to switch from desktop to mobile at width=640px and I would like to set this threshold differently.

Could someone kindly help me with the CSS to set this breakpoint? Thanks in advance!

www.cherryfivers.com

denisegoldberg

I'm not sure what you are trying to change but this page shows how to target CSS for specified screen widths - Change Features for Mobile or Tablet Browsers.

--- Denise

cherryfivers

denisegoldberg wrote: »

I'm not sure what you are trying to change but this page shows how to target CSS for specified screen widths - Change Features for Mobile or Tablet Browsers.

--- Denise

Thanks for the help - I had seen that article before. All I want to do is change the pixel width at which point the "desktop" nav (currently a left-sidebar menu) switches to the "mobile" nav (top bar accordion menu). From that article I'm not entirely sure how to accomplish this.

cherryfivers

I'm bumping this hoping someone can help. So far, I have managed to hide my website left sidebar nav and recenter the rest of the content for screen size less than 1000px using the following css:

@media only screen and (max-width: 1000px) {
/* Hide the left nav bar for screens that aren't large enough */
.sm-page-layout-region-left { display: none; }

/* Move the center of the page to the left edge of the screen */
.sm-page-layout-region .sm-page-layout-region-center { margin-left: 0px !important; }
}

All I need is help on displaying the mobile nav at the top of the page for screens less than 1000px. Currently, the mobile nav does not display until screen size is < 670px

Help appreciated!!

photoclick

This is your navigation menu: sm-page-widget-14053760. It is obviously set to "Collapse on mobile". As a result, once the screen hits 670px the system "rewrites" html: adds sm-page-widget-nav-mobile-header and changes some other classes. I am not sure if you can compete with Smugmug's internal algorithm here. You really cannot do similar changes to the same exact widget (sm-page-widget-14053760) at 1000px point. At least this is my understanding.

But what you can do is to code your own navigation for screens that are 1000px and narrower. Simpy copy what SM has when they hit 670px point. Hide it on wider screens while displaying your left sidebar. Once you are at 1000px - hide left side bar and show (un-hide) your own "mobile" nav. I have something similar on one of my websites - hiding and showing menus based on the width of the screen.

photoclick

P.S. nice photographs, familiar places - we are neighbors

cherryfivers

Thanks @photoclick! I appreciate your help. Your solution is where I was afraid I was headed with this... I thought it'd be easier and could just set the responsive point. Oh well!

Always glad to meet another Capital District photographer! Cheers!

photoclick

I hear you, this is not the most elegant solution - hidden object, etc., but I doubt that with the way SM structured now you have any other option