Tablet and Mobile header widgets distribution

[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 see

Thanks
Rafael

GP Premium 1.3.1

[Tom]

Hi 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-development

[Mildmac 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
Rafael

[Tom]

Can 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-development

[Mildmac 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
Rafael

[Tom]

You 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-development

[Mildmac SA (ESA78960895)]

Great Tom,
Thanks. Much better

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts