- This topic has 7 replies, 2 voices, and was last updated 3 years, 9 months ago by
Tom.
-
AuthorPosts
-
July 17, 2017 at 11:05 am #350751
Mildmac SA (ESA78960895)
Hi,
I´m using GP in this page (http://vvv.terraaurea.com/) but I cannot distribute header elements (logo and 4 widgets)in tablet and mobile versions. I used this CSS code to display inline:.header-widget .widget {
display: inline-block;
vertical-align: top;
margin-left: 30px;}
but it only works for desktop. When it shrinks to tablet and/or mobile, I´m not able to see them right ordered one below the other. I´d like something like this picture (http://vvv.terraaurea.com/wp-content/uploads/mobile-distribution.jpg) Best for me capture A, but if it´s not so easy, then B or even C).
I have this to insert CSS for that in each case, but I tried a lot of combinations and I was not able to achieve it:
/* Include different CSS in breakpoints*/
@media (max-width: 768px) {
/* CSS in here for mobile only */}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */}
@media (min-width: 1025px) {
/* CSS in here for desktop only */
}I do´t want sticky menu in tablet mode, but I only can disable in mobile. Haow can i disable it for tablets?
Thanks a lot. I’m not exactly a css guru, as you can seeThanks
RafaelGP Premium 1.3.1July 17, 2017 at 8:07 pm #350946Tom
Lead DeveloperLead DeveloperHi there,
Give this CSS a try:
@media (max-width: 768px) { .inside-header { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; flex-flow: row wrap; } .site-branding { -webkit-box-ordinal-group: 1; -moz-box-ordinal-group: 1; -ms-flex-order: 1; -webkit-order: 1; order: 1; margin-left: auto; margin-right: auto; } .site-logo { -webkit-box-ordinal-group: 2; -moz-box-ordinal-group: 2; -ms-flex-order: 2; -webkit-order: 2; order: 2; margin-left: auto; margin-right: auto; } .header-widget { -webkit-box-ordinal-group: 3; -moz-box-ordinal-group: 3; -ms-flex-order: 3; -webkit-order: 3; order: 3; margin-left: auto; margin-right: auto; } .header-widget .widget { display: block; float:none; padding: 0; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 18, 2017 at 9:31 am #351238Mildmac SA (ESA78960895)
Hello Tom,
Thank you. Works fine on mobile, but the transition when shrinking the window is rare. First, the logo stays down, glued to the menu and the widgets go up. I would like the logo to be up in the first jump, the widget buttons on the bottom line being rearranged until they are in a column, but already centered from the first moment. I do not know if it is possible to control all that. If it’s too complicated, I can leave it like this. Thank you.I also want to create a shadow in the menu dropdown box. I have added the following code and in the preview of the theme I see it well, but then on the web does not appear. I do not know what could be happening.
.main-navigation .sub-menu {
box-shadow: 0px 5px 10px grey;
}And lastly, there is an orange button in the header (Calendario de actividades) that is orange on all the pages but not in the home page, that the text and the icon leave blue. It has to do with the header links, but it is rare that it only happens in the home page (you can navigate anyother page and check it). The class that has that button is:
.boton-naranja {
border: 2px solid #ff6c00;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
color: #ff6c00;
background: transparent;
font-size: 11px;
line-height: 30px;
text-decoration: none;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
hover: #cccccc;
}
.boton-naranja:hover {
background: #ff6c00;
color: #fff;
}Thanks a lot
RafaelJuly 19, 2017 at 12:26 am #351494Tom
Lead DeveloperLead DeveloperCan you show me a screen of the first issue?
I’m not seeing that CSS added to your site – did you remove it?
The buttons look the same to be on all pages – did you get that fixed?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 19, 2017 at 2:05 am #351543Mildmac SA (ESA78960895)
Here you have a small video showing what I mean, and a capture of what I would like:
http://vvv.terraaurea.com/wp-content/uploads/shrink-captures.jpg
Regarding CSS I only change width to 1024, instead of 768, in your code, just to increase the brealpoint, and add
.main-navigation .main-nav ul li a {
font-size: 13px;
padding: 0 7px;
}to decrease font size of menu items when shrinking. But the code is in there. I send you a copy of the entire additional CSS.
http://vvv.terraaurea.com/wp-content/uploads/Aditional-CSS.txt
Sorry for the CSS code for the dropdown menu shadow. It was not in there, I don´t know why. I set it and it already seems to be ok. Thanks
The problem with orange button must be something in my chrome, because I tried with other browsers and seem to appear ok.
Thanks
RafaelJuly 19, 2017 at 11:33 pm #352046Tom
Lead DeveloperLead DeveloperYou have this CSS:
@media (max-width: 1024px) { .header-widget .widget { display: block; float: none; padding: 0; } }
Try this:
@media (max-width: 1024px) { .header-widget .widget { display: block; float: none; padding: 0; text-align: center; } }
Then increase the 1024 value to something higher to stack the header widgets sooner.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 20, 2017 at 7:15 am #352235Mildmac SA (ESA78960895)
Great Tom,
Thanks. Much betterJuly 20, 2017 at 1:15 pm #352436Tom
Lead DeveloperLead DeveloperYou’re welcome 🙂
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.