Hiding sections from mobile viewing - My Forums

Hiding sections from mobile viewing

cwestcott — Mar 27, 2015, 11:26 AM

Sorry I've gotten into this program just a few days ago.
Can anyone tell me how you actually hide 2 sections on the homepage from being viewed on a mobile device?

Re: Hiding sections from mobile viewing

cwestcott — Mar 30, 2015, 03:20 PM

Thank you guys! I really appreciate it!!!

Re: Hiding sections from mobile viewing

nuan88 — Mar 30, 2015, 03:08 PM

The mobile expert lays it out like boss :-$

Re: Hiding sections from mobile viewing

iusemodx — Mar 30, 2015, 08:29 AM

You are using the Skeleton framework.

If you take a look at "assets/design/css/skeleton.css" you will find the following:

/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }

AND

/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }

If you want to keep your CSS in line with Skeleton you can preset it to the following:

@media only screen and (max-width: 767px) {
	.container .featured {display:none;}
	}

This says: any device viewport with a size below 767px should not display the featured section, everything above this size should show the section.

The problem here (which could possibly arise) is: you are hiding a section that is nested. You could end up with an empty coloured block (in your design, grey), which is possibly not what you want.

You could create a universal class that can be added to any element that you don't want to be shown in mobile devices.

Example CSS:

@media only screen and (max-width: 767px) {
        .hidemobile {display:none;}
	}

Example HTML:


  
    
      
        
          POST CONTENT
        
      
      
        
          POST CONTENT

Note:

Changes To:

Re: Hiding sections from mobile viewing

comp_nerd26 — Mar 30, 2015, 05:59 AM

if your using bootstrap then just include class hidden-xs in your div

Re: Hiding sections from mobile viewing

sottwell — Mar 30, 2015, 05:15 AM

Just keep in mind that even if certain content isn't displayed, the browser still has to download it and have the whole thing available. If you're dealing with large blocks, big images, etc, then having only the content needed for the smallest device and some AJAX to load the content only for larger devices might be a better way to go.

Re: Hiding sections from mobile viewing

nuan88 — Mar 30, 2015, 03:51 AM

haha wow that was a mistake, thanks for the correction!

Re: Hiding sections from mobile viewing

fourroses666 — Mar 30, 2015, 02:57 AM

display:hidden :O

that needs to be display:none

Re: Hiding sections from mobile viewing

nuan88 — Mar 27, 2015, 10:27 PM

And just to walk you through this a bit, what Don has done is taken your 'featured' div and then specified that if the device reports its max-width is 300px or less, the featured div will not display. However if the device reports any bigger size than 300px max, then it will re-appear.

Usually the css goes something like this:

/*--------
Regular styling
--------*/

.header {}
.nav {}
.featured {}
.footer {}

/*RESPONSIVE Styling*/
@media screen and (min-width: 1780px) {
.featured {width:100%;}
}
@media (max-width: 1440px) {
.featured {width:60%;}
}
@media (max-width: 480px) {
.featured {display:hidden;}
}

Just as an example, and this organization is just to make it easier to find stuff in the css. Here I have tried to sort of walk down the size of the featured div.

One last issue is loading unnecessary data, with a phone you want to provide a lighter page. Here its still loading but just not shown. To avoid loading that...I am sorry I don't know how to do it, but it can be done without a doubt.

Re: Hiding sections from mobile viewing

donshakespeare — Mar 27, 2015, 09:52 PM

In your override.css
find

.featured {
  background: #F2F2F2;
}

Change to:

.featured {
  background: #F2F2F2;
}
@media screen and (max-width: 300px) { //300 is an example of mobile size
.featured {
 display: none;
}
}