[Resolved] Display on mobile

Home Forums Support Display on mobile

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #111497
    Philippe

    Hello Tom,

    Would you solition to not display the mobile widgets ?

    Can also force the one.content display on mobile ?

    Thank you

    #111542
    Tom
    Lead Developer
    Lead Developer

    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;
          }
    }
    #111557
    Philippe

    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;}
    }
    
    #111584
    Philippe

    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 ?

    #111608
    Tom
    Lead Developer
    Lead Developer

    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.

    #111619
    Philippe

    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.

    #111638
    Tom
    Lead Developer
    Lead Developer

    Can you show me a screenshot of this separation possibly?

    #111644
    Philippe

    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 ?

    #111704
    Tom
    Lead Developer
    Lead Developer

    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;
          }
    }
    #113680
    Philippe

    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.

    #113772
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #114042
    Philippe

    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.

    #114110
    Tom
    Lead Developer
    Lead Developer

    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 */
    }
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.