Display on mobile

Hi Philippe,

I'm not too sure what you mean? Which mobile widgets?

Are you wanting to remove the separating space on mobile? If so, this might do it:

@media (max-width:768px) {
      .site-main, .widget {
            margin: 0 !important;
      }
}

Thank you,

Forgive me my bad English ...

media (max-width: 768px) {
      .site-principale, .widget {
            margin:! 0 importante;
      }
}

Work perfectly :)

How to block the widgets (left/right/footer) on mobile version ?

I tried using the following code, but it does not work :

@media (max-width:768px) {
      .widget {
            display: none !important;  
            display: block !important;   
      }
}

or/and

@media (max-width:768px) {
.left-sidebar 
      {display: none !important;}

.left-sidebar 
       {display: block !important;}
       
.right-sidebar 
	 {display: none !important;}

.right-sidebar 
     {display: block !important;}
}

I have found a solution with :

@media screen and (max-width: 768px) {
.widget-area {
display: none !important;
}

Unfortunately this code make lost of user experiance points in the google webmaster tools ;(

I'll let the widgets for mobile device...

In mobile device, the separation between widjets left and those on the right is too high (which appear in footer), can we fix it ? Is it possible to reverse the order of widgets and bring up first the right and then the left one ?

There shouldn't be any left/right separation between widgets on mobile - they should just stack on top of each other.

Unfortunately GP is set to show the left sidebar first, then the right sidebar (left to right reading).

It is possible to reverse that, but it would involve a considerable amount of coding.

Yes she is just stack on top of each other. It shows first the left and then there is a double separation, and then it displays the right.

I would like to reduce this separation if possible ...

I'll forget the idea of changing the order of the widgets if this is too complicated.

Can you show me a screenshot of this separation possibly?

Standard separation :

http://image.noelshack.com/fichiers/2015/22/1433094476-separation-standard.png

Double separation between widgets from left and right :

http://image.noelshack.com/fichiers/2015/22/1433094510-separation-double-entre-widgets-de-gauche-et-de-droite.png

I also wondered if it is possible to change the title of the header (shorter) for mobile devices ?

Looks like you maybe added some custom CSS?

To remove the extra spacing on mobile, do this:

@media (max-width:768px) {
      .separate-containers .inside-right-sidebar, .inside-left-sidebar {
            margin-top: 0;
      }
}

Which header? If you want to change it completely, you'll need to wrap them each in a div, one meant for desktop, and one meant for mobile.

For example:

<div class="mobile-header">
      Mobile header in here
</div>
<div class="desktop-header">
      Desktop header in here
</div>

.mobile-header {
      display: none;
}

@media (max-width: 768px) {
      .mobile-header {
            display: block;
      }
      .desktop-header {
            display: none;
      }
}

Hi Tom,

The first problem (remove the extra spacing on mobile) is solved thank you :)

For the second question, I have some difficulty in understanding what to do with your instructions.

I wish at "@media (max-width: 768px)" from display the name of my site (in the header) from "mysite.com" to "mysite" for get a better result aesthetical (save space on small mobile screens).

I would also like to change partially the slogan at "@media (max-width: 768px)", so that it takes up less space on mobile display.

Best regards.

This is the part where you can add one site title for desktop display, and one for mobile display:

<div class="mobile-header">
      Mobile header in here
</div>
<div class="desktop-header">
      Desktop header in here
</div>

So instead of using the built in site title and tagline, you would add them using GP Hooks in the Before Header Content hook.

Then the CSS will hide the mobile header on desktop, and display it on mobile.

.mobile-header {
      display: none;
}

@media (max-width: 768px) {
      .mobile-header {
            display: block;
      }
      .desktop-header {
            display: none;
      }
}

Let me know if that makes more sense :)

Hi Tom,

For the first problem (remove the extra spacing on mobile) your solution was unfortunately incomplete, but it helped me to find the right solution which was a bit complicated...

Here is the solution I found :

@media (max-width:768px) {
      .separate-containers .inside-left-sidebar {
            margin-top: 20px!important;
      }
      .separate-containers .inside-right-sidebar, .inside-left-sidebar {
            margin-top: 0px;
      }
} 

Without this supplement, this at eliminated the separation between the footer page and the first widget.

In your code, what is exactly the signification of the comma in ".inside-right-sidebar, .inside-left-sidebar" ? It's for notify a inter-dependence of the right-sidebar and the left-sidebar ?

I will now test the solution for the titles :)

Best regards.

Putting a comma between them means that the CSS below will apply to both elements, not just one of them.

So you can do this:

.first-class,
.second-class,
.third-class {
      /* stuff in here will apply to all three classes above */
}