Mobile theme modification

MarcQuinlivan · November 11, 2015

Hi,
I'm trying to make a change to my site to change the behaviour on mobile devices.

Ideally, what I would like to do is change the viewport value at which the mobile theme is displayed.

If I view my site on an iPad Air I get the full desktop view in portrait and landscape mode.

On my iPhone 6 I get the mobile view in portrait and landscape mode.

On my LG Nexus 5X I get the mobile view in portrait and the desktop view in landscape.

The desktop view kicks in when the viewport is 670 pixels wide and below this the browser displays the mobile view.

This is all as expected, however the problem I have is that my menu bar only displays properly at a viewport width of 980 pixels.

I tried to use Aaron's customisation to remove the social icons menu at the right hand side of the menu bar in desktop mode, and while this worked it did not hide the column. There are three columns in the menu bar and they all appear to have the same identifier.

What I want to know is:

1) Is there a way to force the mobile view when the screen width is lower than a certain number of pixels?

2) Is there a way to hide the social icons column below a certain width and then make the navigation menu column fill the gap it has left.

At the moment my columns are 18% (logo), 64% (navigation menu) and 18% (social icons).
I would like to have this as 18% (logo) and 82% (navigation menu) if the screen width is between 670 and 980 or 1000.

I hope that makes sense.

I will attach screenshots from each device to hopefully make things clearer.

The site is www.alyxcoby.com

MarcQuinlivan · November 11, 2015

iPhone 6 view

MarcQuinlivan · November 11, 2015

Nexus 5X view. As you can see on landscape the menu is moved in behind the logo.

MarcQuinlivan · November 11, 2015

What I was trying to do was hide the third column when the screen width is less that 1000px, but that does not seem possible.

As you can see "sm-page-layout-row yui3-g" is the area corresponding to the entire menu bar.

Under that are three DIVs which hold the columns (logo, navigation, social icons). They all have the same identifier "sm-page-layout-column yui3-g".

Is there a way I can target the third column with CSS and set it to "display:none" and then modify the second column's properties so that it is "width: 82%", or even change column 1 to be a pixel value and column 2 to be the rest of the screen width?

Hopefully that makes what I'm trying to achieve a bit clearer.

MarcQuinlivan · November 11, 2015

OK, so I've figured out what needs to be changed to get the result I want. Now I just need help to identify columns two and three so I can use CSS to change the values.

I've manually edited the source in using Chrome and it looks fine.

Hikin' Mike · November 12, 2015

You really can't edit that, but you can try this:

/**
* Hides Social Badges Smaller than 1000px Wide 
***************************************************/    
@media only screen and (max-width: 1000px) {

    .sm-user-ui .sm-page-widget-10805113 {
        position: absolute;
        right: 10px;
        }

    .sm-user-ui .sm-page-widget-10868652 {
        display: none;
        }
        
}

MarcQuinlivan · November 13, 2015

Thanks for that.

I have used the following code and it now does what I want.

@media screen and (min-width: 671px) and (max-width: 1000px) {
 /* this hides the third column fully */
  .sm-page-layout-region.sm-page-layout-region-header.sm-page-layout-region-pinned > div > div > div:nth-child(3) {display:none;}

/* this reduces the spacing between the menu links from 24px to 15px */
  .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink {
      margin-right: 15px; 
  }  
 
/* this positions the navigation widget on the right hand side of the screen, 10px from the edge */
  .sm-user-ui .sm-page-widget-10805113 {
      position: absolute;
      right: 10px;
      }

/* this hides the widget, but not the div for the third column */
  .sm-user-ui .sm-page-widget-10868652 {
      display: none;
  }

}

I only wanted it to remove the social icons between 671 and 1000, so they wouldn't be removed from the mobile view so I added a "min-width" to it too.

Thanks for your help.

The image below is at 671px wide. Mobile view displays as in my original post at 670px and below while the full desktop view appears above 1000px.

Hikin' Mike · November 13, 2015

Glad it worked!

tenebs · October 29, 2016

Thanks, I was able to use your suggestions too to hide my left margin mini slideshow from small mobile devices. I couldn't figure out that I needed the .sm-user-ui part too.

/*Hide the mini left slideshow for mobile browsers */
@media only screen and (max-width: 480px) {
.sm-user-ui .sm-page-widget-5615980 { display: none !important; }
}

Mobile theme modification

Comments