0

How to let "IN PC" item show on computer screen only (cannot show on mobile phone). this menu's item has problem (will still display) , puzzling for many days, still unable to resolve it. Where is the problem and how to solve it.

Thank you.

@media only screen and (max-width:768px) {.hide-phone { display: block; } }

http://www.ecotw.com.tw/vicky/hl-doc/test.html

enter image description here

1 Answer 1

1

Edits after your comment update:

I have checked your code so things going wrong or what you can do.

  1. You have div as a direct child in your UL which is a bad approach, you should only use LI as a direct child of UL and then in LI you can use div or whatever you want.

a structure like this,

<ul class="nav sidebar-inner" id="sidebar-menu">
    <li class="has-sub">
    </li>
    <li class="has-sub"> 
    </li>
    <li class="has-sub">
    </li>
    <li class="has-sub">
    </li>
    <li class="has-sub">
    </li>
    <li class="has-sub desktop">
    </li>
    <li class="has-sub mobile">
    </li>
    <li class="has-sub">
    </li>
</ul>

LI with a class desktop which you want to show on desktop only and LI with class mobile is the part which you want to show on mobile only.

now just write the CSS for your requirement. make mobile's display none without any media point and block it on mobile and make desktop's display none on mobile only. like this...

.mobile {display: none;}
@media(max-width:767px){
    .mobile {
        display: block;
    }
    .desktop {
        display: none;
    }
}

NOTE: 767 is the point I have in the above code just for demo purpose, you can change it to whatever you need. apply the exact logic and make your HTML right, it will work for you.

3
  • I am still confused your advice,maybe I wrote incorrect English. My question is IN PC this option havs to be showed on screen,but hide in mobile phone.Mobile must show on phone,but must hide in pc screen. How already set up ,but formatting is off. how to fix this problem? thank you. ecotw.com.tw/vicky/hl-doc/test.html drive.google.com/open?id=1YdMO9jwDi_kLKFefm3B7OGpQP6MxMqM2
    – Vicky Lee
    May 4, 2020 at 3:38
  • You are really a genius)))))))))))))))))) solved my problem instantly. Thank you so much, now I know what is my problem, I shouldn't let menu lies in <div> jeopardizing the screen. Thanks again. 3>
    – Vicky Lee
    May 4, 2020 at 5:18
  • Gald to know it helped you, don't forget to mark it as right answer and upvote too, May 4, 2020 at 5:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.