- This topic has 12 replies, 2 voices, and was last updated 7 years, 7 months ago by
Tom.
-
AuthorPosts
-
May 30, 2015 at 3:32 pm #111497
Philippe
Hello Tom,
Would you solition to not display the mobile widgets ?
Can also force the one.content display on mobile ?
Thank you
May 31, 2015 at 12:10 am #111542Tom
Lead DeveloperLead DeveloperHi 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 31, 2015 at 3:42 am #111557Philippe
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;} }
May 31, 2015 at 8:02 am #111584Philippe
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 ?
May 31, 2015 at 9:05 am #111608Tom
Lead DeveloperLead DeveloperThere 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.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 31, 2015 at 9:40 am #111619Philippe
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.
May 31, 2015 at 10:37 am #111638Tom
Lead DeveloperLead DeveloperCan you show me a screenshot of this separation possibly?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentMay 31, 2015 at 10:55 am #111644Philippe
Standard separation :
http://image.noelshack.com/fichiers/2015/22/1433094476-separation-standard.png
Double separation between widgets from left and right :
I also wondered if it is possible to change the title of the header (shorter) for mobile devices ?
May 31, 2015 at 11:50 pm #111704Tom
Lead DeveloperLead DeveloperLooks 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; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 10, 2015 at 5:28 am #113680Philippe
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.
June 10, 2015 at 10:16 am #113772Tom
Lead DeveloperLead DeveloperThis 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 π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJune 11, 2015 at 12:16 pm #114042Philippe
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.
June 12, 2015 at 12:16 am #114110Tom
Lead DeveloperLead DeveloperPutting 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 */ }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.