html - First time using @media screen -


it did not go ... right sidebar disappears if screen small alright top sidebar staying there , not understand why ... after fiddling hours decided ask help.

website http://www.notloli.com.br

<html><head>   <style type="text/css"> body{ width:100%; height:100%; margin:0px; background-color:#aaa; font-family:trebuchet ms, tahoma; }  @media screen , (max-width:899px){ div.sidebar{visibility:hidden}; div.sidebartop{visibility:visible}; div.mainbox{width:100%;top:calc(100% - 210px);min-height:calc(100% - 210px);} }  @media screen , (min-width:900px){ body{font-weight:bold}; div.sidebar{visibility:visible}; div.sidebartop{visibility:hidden}; div.mainbox{width: calc(100% - 310px);top:0px;min-height:100%;} }  div.sidebar{ position:fixed; right:0px; height:100%; z-index:2; background-color:#9374a4; width:300px; color:#fff; margin:0px; padding:15px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-left:1px solid pink; }  div.sidebartop{ top:0px; position:fixed; z-index:2; width:100%; margin:0px; padding:15px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height:200px;  background-color:#abab63; } </style></head><body> <div class="sidebartop"></div><div class="sidebar"></div> </body></html> 

please assist me ... thank

so if screen "big" have side bar , no top bar, if screen small have topbar , no sidebar, right? think confused visibility:visible display:none , display:inline-block , create parent main , side div. try this:

<html><head>   <style type="text/css"> body{ width:100%; height:100%; margin:0px; background-color:#aaa; font-family:trebuchet ms, tahoma; }   @media screen , (min-width:900px){.sidebartop{display:none}}  @media screen , (min-width:900px){body{font-weight:bold}}   .mainbox{display:inline-block;width:70%;min-width:600px}  .sidebar{ position:fixed; right:0px; height:100%; z-index:2; background-color:#9374a4; width:300px; color:#fff; margin:0px; display:inline-block; padding:15px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-left:1px solid pink; } @media screen , (max-width:899px){.sidebar{display:none}}  .sidebartop{ top:0px; position:fixed; z-index:2; width:100%; margin:0px; padding:15px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height:200px;  background-color:#abab63; } </style></head><body> <div class="sidebartop"></div> <div> <div class="mainbox"></div><div class="sidebar"></div> </body></html> 

i did not try compatibly tutorial example


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -