Woocommerce - my account page tabs on mobile

Started by: Lia Liali October 27, 2017 - 06:44

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.

Replies:

  • Author Team
    #5521 Reply

    Felix
    Hi,
    Please try to use this custom CSS:

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

    Regards

    #5522 Reply

    Lia Liali
    Thank you Felix,

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

    Regards

    Author Team
    #5523 Reply

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

    Lia Liali
    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.

    Author Team
    #5525 Reply

    Axel
    Please try to use custom CSS like this:

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

    Regards

    #5546 Reply

    Lia Liali
    Well, it should do the job for portrait view, but it doesn't.
    Author Team
    #5553 Reply

    Felix
    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 Reply

    Lia Liali
    Thank yo Felix, once more, for your help.

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

    Author Team
    #5583 Reply

    Felix
    Hi,

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

    regards

You must be logged in to reply to this topic.