Im not sure what Im doing wrong Im have an issue with media query I've got it set up as @media (min-width:401px) and (max-width:768px){ .main-container { background-color: #0BFF18; } } @media (max-width:400px){ .main-container { background-color: #0F00FF; } } Desktop show as a red panel Tablet yellow Mobile blue but the tablet version does not show up in dreamweaver or via the brower not sure what I missing? Thanks Tim -------------- --------------- <!doctype html> <html><head> <meta charset="UTF-8"> <title>Untitled Document</title> <style> * { margin: 0; padding: 0; } .font { font-family: 'Fira Sans', sans-serif; } .email-hr-line { width: 100%; } .font { font-family: 'Fira Sans', sans-serif; } .float-left { text-align: left; margin-top: -218px; margin-left: 244px; } .float-right { float: right; margin-top: -20px; } .header { padding: 0; height: 376px; background-repeat: repeat-x; margin-top: -22px; } .header-top-text { color: #FFFFFF; font-weight: 600; margin-top: -18px; margin-bottom: 19px; padding-top: 43px; max-width: 1200px; margin-left: auto; margin-right: auto; } #opened11 { } .container { margin-left: auto; margin-right: auto; } .top-background { background-image: -webkit-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: linear-gradient(180deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); width: 100%; height: 200px; background-repeat: repeat-x; visibility: visible; margin-bottom: 0px; margin-left: auto; margin-right: auto; text-align: center; } .top-background-index { background-image: -webkit-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: linear-gradient(180deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); width: 100%; height: 200px; background-repeat: repeat-x; visibility: visible; margin-bottom: -20px; } .top-background-profile { background-image: -webkit-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: -moz-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: -o-linear-gradient(270deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); background-image: linear-gradient(180deg,rgba(3,115,209,1.00) 0%,rgba(255,255,255,1.00) 79.19%,rgba(255,255,255,1.00) 100%); width: 100%; background-repeat: repeat-x; visibility: hidden; margin-bottom: 21px; } .text-dark-blue { color: #1A00FF; font-weight: 600; margin-left: 200px; } .text-blue { color: #059FE3; font-weight: 600; margin-left: 199px; padding-right: 10px; } .text-green { color: #1FB954; font-weight: 600; margin-left: 199px; } .text-red { color: #FF0201; font-weight: 600; } .text-orange { color: #F78727; } .text-grey { color: #908F8F; } .nav-events-green-button { background-color: #1DB954; } .green-panel { background-color: #1DB953; } .red-panel { background-color: #FE0001; } .orange-panel { background-color: #F88826; } .blue-panel { background-color: #32A9FF; margin-left: 199px; } } .light-blue-panel { background-color: #71BDFF; } .dark-blue-panel { background-color: #2499FB; } .light-green-panel { background-color: #18D953; } .dark-grey-panel { background-color: #37494B; } .text-dark-blue { color: #1A00FF; font-weight: 600; margin-left: 200px; } .text-blue { color: #059FE3; font-weight: 600; margin-left: 199px; padding-right: 10px; } .text-green { color: #1FB954; font-weight: 600; margin-left: 199px; } .text-red { color: #FF0201; font-weight: 600; } .text-orange { color: #F78727; } .text-grey { color: #908F8F; } .purple-panel { background-color: #1400F9; } scroll bar start } a { color: #FFFFFF; text-decoration: none; } .search-inbox { margin-top: -9px; width: 67px; margin-left: 30px; margin-right: 96px; } .hamburger-icon { width: 45px; margin-top: 10px; margin-left: -47px; } .button-tessssssst { margin-top: -113px; margin-bottom: 65px; margin-left: 158px; } .control-login-button-test { height: 400px; max-width: 1200px; } .general-information-text { font-size: 31px; margin-bottom: -36px; margin-top: -13px; margin-left: 27px; color: rgba(29,185,83,1.00); font-weight: 400; width: 1200px; } .nav-menu-bar-centre-panel { height: 2em; margin-right: auto; margin-top: -30px; margin-left: auto; max-width: auto; } .menu-strip { width: 1200px; height: 72px; margin-top: -14px; /* [disabled]background-color: #FFFFFF; */ padding-bottom: 0px; padding-top: 26px; } .menu-strip2 { width: 1200px; height: 100px; margin-top: -67px; /* [disabled]background-color: #FFFFFF; */ padding-bottom: 0px; padding-top: 26px; } .menu-strip3 { width: 1200px; height: 37px; margin-top: -64px; } box-sizing: border-box; } .main-nav { margin-top: auto; margin-right: auto; margin-bottom: auto; padding: 0; margin-left: auto; height: 35px; } .main-nav ul { display: flex; justify-content: center; align-items: center; margin-top: auto; margin-right: auto; margin-left: auto; margin-bottom: auto; padding: 0; /* [disabled]background-color: rgba(36,153,251,1.00); */ font-size: large; } .main-nav ul li { list-style: none; margin: 0; padding: 0; border-left: 1px solid #fff; font-size: large; } .main-nav ul li:last-child { border-right: 1px solid #fff; font-size: large; } .main-nav ul li a { display: block; color: #fff; text-decoration: none; padding: 8px 15px 8px 15px; } .main-nav .active-top-menu a { background-color: #71bdff; color: #000!important; } .sub-menu { display: none; } .purple-panel { background-color: #1A00FF; } .sub-1 a, .sub-2 a, .sub-3 a { background-color: #CDE6FD!important; color: #2499FB!important; display: none; } .active { display: block; /* [disabled]background-color: #71BDFF; */ } hr { margin-bottom: 54px; border-top: 2px solid rgba(36,153,251,1.00); padding-bottom: 0px; background-color: #F50E12; margin-left: auto; margin-right: auto; max-width: 100%; margin-top: 13px; } .hr-height { margin-top: 22px; margin-bottom: 73px; background-color: #000000; } .scrollable-nav-container { margin: 0 auto; background-color: #f2f2f2; display: flex; align-items: center; max-width: 1200px; overflow-x: scroll; } .scrollable-nav-inner { overflow: hidden; flex: 1; margin-left: auto; margin-right: auto; text-align: center; } .scrollable-nav ul { margin: 0; padding: 0; white-space: nowrap; overflow-x: scroll; } .scrollable-nav li { display: inline-block; list-style: none; margin: 0; } .fa-angle-left, .fa-angle-right { font-size: 30px!important; padding: 5px 10px; height: 5px; margin-top: -106px; vertical-align: -4px; } .instructions { width: 60%; margin: 0 auto; } .instructions span { font-size: 13px; text-align: center; display: block; padding: 8px 0; } .main-nav-container { background-color: #2499FB; width: 100%; } .main-nav-container-general { background-color: #2499FB; width: 100%; margin-bottom: -31px; margin-top: -18px; } .scrollable-nav ul li a { display: block; text-decoration: none; color: #fff; padding: 10px 15px; margin-left: -3px; } .nav-bar-font-size { font-size: 18px; color: #000000; margin-top: -10px; margin-bottom: -18px; } scroll bar end #date { } #date { color: #000000; font-size: 31px; margin-top: 7px; padding-left: 25px; padding-right: 25px; } .footer { left: 0px; bottom: 0px; height: 359px; width: 100%; background-color: #37494B; } .footer2 { margin-top: 1514px; } .help { margin-left: 33px; line-height: 19px; } .space { } .footer-container { margin-left: auto; margin-right: auto; height: 350px; max-width: 1200px; } .footer-right-container { } .footer-right-container { height: 300px; margin-bottom: -51px; margin-top: -128px; margin-left: 832px; max-width: 375px; background-color: #FF4548; } .social-buttons { height: 69px; width: 320px; margin-top: 1px; margin-bottom: -10px; max-width: 320px; } .logo-placement { height: 157px; max-width: 350px; } .smalltext-panel { text-align: left; float: left; margin-left: 9px; clear: left; margin-top: 0px; max-width: 249px; } .footer-country-panel { width: 287px; height: 49px; border: 1px solid #FFFFFF; float: right; margin-top: -235px; margin-bottom: -10px; margin-right: 46px; } .footer-email-imput { float: right; margin-top: 42px; height: 46px; margin-right: 5px; max-width: 351px; } .footer-Subscribe-main-text { color: #FFFFFF; float: left; font-style: italic; font-weight: 500; line-height: 27px; max-width: 602px; } .united-kingdom-text { color: #FFFFFF; width: 127px; margin-left: 19px; margin-top: -29px; } .footer-subscribe-button { background-color: #C2C2C2; padding-top: 10px; padding-left: 19px; padding-right: 19px; padding-bottom: 10px; float: right; margin-top: 42px; width: 74px; height: 32px; margin-left: -5px; margin-right: 35px; line-height: 29px; } .footer-soicial-media-buttons { padding-right: 0px; margin-right: 13px; margin-bottom: -22px; width: 50px; } .footer-loaction-text { width: 329px; margin-left: 30px; margin-bottom: 12px; color: #FFFFFF; padding-top: 47px; margin-top: 3px; } .facebook-button { margin-left: -5px; margin-right: 12px; margin-bottom: -22px; margin-top: 6px; width: 50px; } .fb-button3 { margin-left: 31px; } .facebook-move2 { margin-left: -2px; } .facebook-button2 { width: 50px; margin-bottom: -21px; margin-right: 10px; margin-left: 29px; margin-top: 2px; } .footer-list { margin-left: 36px; width: 300px; color: #FFFFFF; margin-bottom: -6px; margin-top: 14px; } .footer-list-height { padding-top: 0px; margin-top: -2px; } .hr-link { width: 24px; min-width: 14px; border: 1.5px solid #FFFFFF; margin-top: 22px; margin-left: 231px; } a { color: #FFFFFF; text-decoration: none; } .main-container { max-width: 1200px; margin-left: auto; margin-right: auto; background-color: #FF3E39; min-height: 800px; margin-bottom: 20px; } } @media (min-width:401px) and (max-width:768px){ .main-container { background-color: #0BFF18; } } @media (max-width:400px){ .main-container { background-color: #0F00FF; } } </style> <!--script for navbar start--> <div class="main-container"> </div> <!--?????????? start--> <!--?????????? end--> </div> <!--Container end--> </body> </html> <!--?????????? start--> <!--?????????? end--> ------------ -----------
... View more