html - @media (max-width: 767px) { /*content*/} does not work -
so trying make webpage responsive , few days before found main css modification makes webpage responsive @media rule problem
@media (min-width: 768px) , (max-width: 979px) { .dropdown-content { margin-left:10% } }
this part of bootstrap-responsive.css refer tablet window version of webpage working fine. when switch mobile window version i.e. max-width :767px; html page not read it
@media (max-width: 767px) { .dropdown:hover .dropdown-content { display:none; } }
this part of code not read in mobile window version. want utilize first css code above during tablet version , second css code above during mobile version. related js file or missing else? please me solution.
edit:- have changed attributes above , added html code down here
<li class="dropdown"> <a href="policies.php">policy</a> <div class="dropdown-content"> <!--dropdown-content div--> </div> </li>
by default attribute of dropdown-content
.dropdown-content{ display:none; }
and when hover @ dropdown following code takes action
.dropdown:hover .dropdown-content{ display:block; }
whereas in mobile window version want hide again such hovering on dropdown not show dropdown-content
please add code sample html & css otherwise check out device size related media queries it's given below
// small devices (portrait phones, less 576px) @media (max-width: 575px) { ... } // small devices (landscape phones, 576px , up) @media (min-width: 576px) , (max-width: 767px) { ... } // medium devices (tablets, 768px , up) @media (min-width: 768px) , (max-width: 991px) { ... } // large devices (desktops, 992px , up) @media (min-width: 992px) , (max-width: 1199px) { ... } // large devices (large desktops, 1200px , up) @media (min-width: 1200px) { ... }
Comments
Post a Comment