tablet won't work in media query

Report · Feb 25, 2019

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>

<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>

</div>

</div>

</body>

</html>

------------

-----------

Report · Feb 25, 2019

Remove the extra closing } shown in red below, after your main-container css selector. See if that corrects the problem. If not post back.

.main-container {

max-width: 1200px;

margin-left: auto;

margin-right: auto;

background-color: #FF3E39;

min-height: 800px;

margin-bottom: 20px;

}

I would also simplify your media queries to:

@media (max-width:768px){

.main-container {

background-color: #0BFF18;

}

@media (max-width:480px)

.main-container {

background-color: #0F00FF;

}

Report · Feb 25, 2019

Thank You, Thats works now but for some reason when I typed it in, it would not correct it. I hat to delete the media query and add a new one into dreamweaver to get it to work for some reason. Maybe a bug not sure.

Thanks Tim

Report · Feb 25, 2019

Hi, I thought It was working but its not sadly, hope you can have another look for me please

On my desktop web browser on safari and Crome it works

red panel = desktop size

blue panel = tablet

green panel = mobile

but on my mobile using a iPhone 7 - it show up a Red

and on my iPad it also shows up as Red

http://www.tcdesignstamford.co.uk/eventifyit-2019/template2.html

--------

------

<!doctype html>

<title>Untitled Document</title>

<style>

.main-container {

max-width: 1200px;

margin-left: auto;

margin-right: auto;

background-color: #FF3E39;

min-height: 800px;

margin-bottom: 20px;

}

@media (max-width:768px){

.main-container {

background-color: #0046C5;

}

@media (max-width:480px){

.main-container {

background-color: #1BE400;

}

</style>

</div>

</body>

</html>

-------

------

Report · Feb 25, 2019

Have you tried specific media queries for ipad:

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px) {

/* STYLES GO HERE */

}

and for iphone:

@media only screen

and (min-device-width : 375px)

and (max-device-width : 667px) {

/* STYLES GO HERE */

}

Adobe Community

tablet won't work in media query

1 Correct answer