-2

I have designed 3 Different devices, hoping each device can perform normally whether screen is vertical or horizontal, left menu can choose zoom or shrink. but now I’m stuck, I found that set up for above 2K HD is a disaster, without showing all selections. How to fix this to allow all menu to follow for all devices. I hope that menu’s font and spacing can be automatically adjust by percentage according to various solution.

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

display in my device

/* display in laptop */
.hide-phone{display:none}
@media only screen and (max-width:1366px) { 
.hide-phone { display: block; } }

/* display in tablet */
.show-tablet{display:none}
@media only screen and (min-width:1024px) { 
.show-tablet { display: block; } }

/* display in mobile phone */
.show-phone{display:none}
@media only screen and (min-width:980px) { 
.show-phone { display: block; } }

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

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

/*===== topmenu/laptop =====*/
.topmenu {
    margin: 0 auto;
}

.topmenu li a{
	font-size:18px;
	color:#eee;
    padding: 15px;
}

.topmenu li a {
    padding: 15px; }
    @media (min-width: 1400px) {
      .topmenu li a {
        padding: 40px; } }



.topmenu li a:hover {
	font-size:18px;
	color: #fff;
	font-weight:bold;
}

/*===== topmenu/tablet =====*/
.topmenu-tablet {
    margin: 0 auto;
}

.topmenu-tablet li a{
	font-size:12px;
	color:#eee;
    padding: 10px;
}

.topmenu-tablet li a:hover {
	font-size:12px;
	color: #fff;
	font-weight:bold;
}

.topmenu-tablet li a {
    padding: 12px; }
    @media (min-width: 1366px) {
      .topmenu-tablet li a {
        padding: 40px; } }


/*===== topmenu/mobile phone =====*/
.topmenu-mobile{
	margin: 0 auto;}


.topmenu-mobile li a{
	font-size:18px;
	color:#eee;
    padding-right: 6px;
    padding-left: 6px;
}


.topmenu-mobile li a:hover {
	font-size:18px;
	color: #fff;
	font-weight:bold;
}

1 Answer 1

0
@media screen and (min-width: 1401px) and (max-width: 1599px) {
.topmenu li a, .topmenu li a:hover {
    font-size: 110%;
    padding: 15px;
  }
}
@media screen and (min-width: 1600px) and (max-width: 1919px) {
.topmenu li a, .topmenu li a:hover {
    font-size: 120%;
    padding: 20px;
  }
}
@media screen and (min-width: 1920px)and (max-width: 2387px) {
.topmenu li a, .topmenu li a:hover {
    font-size: 125%;
    padding: 30px;
  }
}

@media screen and (min-width: 2388px) {
.topmenu li a, .topmenu li a:hover {
    font-size: 130%;
    padding: 35px;
  }
}

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.