Inspiring

Answered

tablet won't work in media query

Forum|Forum|6 years ago
February 25, 2019
1 reply
650 views

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>

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

-----------

This topic has been closed for replies.

Correct answer osgood_

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>

-------

------

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

}

O

osgood_

Legend

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;

}

T

tim crossAuthor

Inspiring

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

T

tim crossAuthor

Inspiring

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>

-------

------

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded