Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Tablet and Mobile header widgets distribution

Home Forums Support Tablet and Mobile header widgets distribution

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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 see

    Thanks
    Rafael

    GP Premium 1.3.1
    #350946
    Tom
    Lead Developer
    Lead Developer

    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;
    	}
    }
    #351238
    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

    #351494
    Tom
    Lead Developer
    Lead Developer

    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?

    #351543
    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

    #352046
    Tom
    Lead Developer
    Lead Developer

    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.

    #352235
    Mildmac SA (ESA78960895)

    Great Tom,
    Thanks. Much better

    #352436
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.