Home Forums Masterstudy – Education WordPress Theme Woocommerce – my account page tabs on mobile

This topic contains 9 replies, has 3 voices, and was last updated by  Felix 2 months, 3 weeks ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #5520

    Lia Liali
    Member

    Hello,
    I use MasterStudy 1.6.2
    Could you please help me to fix the way My Account tabs (Woocommerce) show on mobile phone?
    Here’s what it looks like: http://prntscr.com/h2l7iz

    The link to the page is http://ieel.gr/en/my-account/

    In order to achieve the way a Teacher’s tabs show on mobile (http://prntscr.com/h2l8w1) I tried adding the following css code, but it doesn’t work:

    
    /***********MY ACCOUNT  TABS RESPONSIVE***********/
    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 320px) {
    
    div.woocommerce nav.woocommerce-MyAccount-navigation ul li {
    			display: block !important!;
    		}  
    div.woocommerce nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--dashboard.is-active{
        display: block !important!;
    }
    div.woocommerce nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--orders{
        display: block !important!;
    }
    div.container div.woocommerce nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--downloads{
         display: block !important!;
    }
    div.woocommerce nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--edit-address{
        display: block !important!;
    }
    div.woocommerce nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--edit-account{
         display: block !important!;
    }
    div.woocommerce nav.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link.woocommerce-MyAccount-navigation-link--customer-logout{
        display: block !important!;
    }
    }
    /* ----------- iPhone 4 and 4S ----------- */
    
    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) {
      		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 480px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) {
      		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    
    }
    
    /* ----------- iPhone 5, 5S, 5C and 5SE ----------- */
    
    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) {
      		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media only screen 
      and (min-device-width: 320px) 
      and (max-device-width: 568px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) {
      		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    
    }
    
    /* ----------- iPhone 6, 6S, 7 and 8 ----------- */
    
    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 667px) 
      and (-webkit-min-device-pixel-ratio: 2) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 667px) 
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 667px) 
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* ----------- iPhone 6+, 7+ and 8+ ----------- */
    
    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 414px) 
      and (max-device-width: 736px) 
      and (-webkit-min-device-pixel-ratio: 3) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media only screen 
      and (min-device-width: 414px) 
      and (max-device-width: 736px) 
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media only screen 
      and (min-device-width: 414px) 
      and (max-device-width: 736px) 
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: landscape) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* ----------- iPhone X ----------- */
    
    /* Portrait and Landscape */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 812px) 
      and (-webkit-min-device-pixel-ratio: 3) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 812px) 
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: portrait) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media only screen 
      and (min-device-width: 375px) 
      and (max-device-width: 812px) 
      and (-webkit-min-device-pixel-ratio: 3)
      and (orientation: landscape) { 
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* ----------- Galaxy S3 ----------- */
    
    /* Portrait and Landscape */
    @media screen 
      and (device-width: 320px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 2) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media screen 
      and (device-width: 320px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 2) 
      and (orientation: portrait) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media screen 
      and (device-width: 320px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 2) 
      and (orientation: landscape) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* ----------- Galaxy S4, S5 and Note 3 ----------- */
    
    /* Portrait and Landscape */
    @media screen 
      and (device-width: 320px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media screen 
      and (device-width: 320px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) 
      and (orientation: portrait) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media screen 
      and (device-width: 320px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) 
      and (orientation: landscape) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* ----------- Galaxy S6 ----------- */
    
    /* Portrait and Landscape */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 4) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 4) 
      and (orientation: portrait) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 4) 
      and (orientation: landscape) {
    .woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* ----------- Google Pixel ----------- */
    
    /* Portrait and Landscape */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) 
      and (orientation: portrait) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) 
      and (orientation: landscape) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* ----------- Google Pixel XL ----------- */
    
    /* Portrait and Landscape */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 4) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 4) 
      and (orientation: portrait) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 4) 
      and (orientation: landscape) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* ----------- HTC One ----------- */
    
    /* Portrait and Landscape */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Portrait */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) 
      and (orientation: portrait) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    
    /* Landscape */
    @media screen 
      and (device-width: 360px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 3) 
      and (orientation: landscape) {
    		.woocommerce-MyAccount-navigation ul li {
    			display: block;
    		}
    }
    

    Please help me out!
    Thank you in advance.

    #5521

    Felix
    Moderator

    Hi,
    Please try to use this custom CSS:

    @media (max-width: 991px)
    {
        .woocommerce-MyAccount-navigation ul li 
        {display: block;}
    }

    Regards

    #5522

    Lia Liali
    Member

    Thank you Felix,

    it works in landscape view. Any ideas on how to make it work in Portrait view too?

    Regards

    #5523

    Felix
    Moderator

    Hi Lia,
    Please try to remove your old styles. It should work in any view.
    regards

    #5524

    Lia Liali
    Member

    I removed my old styles Felix, but it still…

    Portrait view http://prntscr.com/h2u6jf

    Landscape view (great!) http://prntscr.com/h2u7mg

    Is there anything I can do?

    Thank you for helping out.

    #5525

    Axel
    Moderator

    Please try to use custom CSS like this:

    @media (max-width: 991px) {
        .woocommerce-MyAccount-navigation ul li {display: block !important;}
    }

    Regards

    #5546

    Lia Liali
    Member

    Well, it should do the job for portrait view, but it doesn’t.

    #5553

    Felix
    Moderator

    Hi,
    Please use this custom CSS:

    @media (max-width: 991px) and (orientation:portrait) 
    { .woocommerce-MyAccount-navigation ul li {display: block !important;} }
    @media (max-width: 991px) and (orientation:landscape) 
    { .woocommerce-MyAccount-navigation ul li {display: block !important;} }

    regards

    #5579

    Lia Liali
    Member

    Thank yo Felix, once more, for your help.

    i used it, no change occured on the portrait view. It’s strange.

    #5583

    Felix
    Moderator

    Hi,

    Please create a ticket with your site credentials and our support engineers will check it for you.

    regards

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.