CODEWITHSUNDEEP
cssmedia-queries
S.Pearson
S.Pearson

Reputation: 123

CSS Media Query not displaying on mobile

I'm new to this, so I'm expecting that it's something simple that I've overlooked.

The site I've built responds to the media queries when resizing the window directly in my browser. The site responds to the media queries when I look on my iPad. But when looking on my mobile, it shows the tablet version rather than the mobile.

@media screen and (max-width: 767px) {
.container {
    width: 100%;
}
.logo {
    background-position: 50% 30px;
}
.banner {
    height: 500px;
}
.banner h1 {
    margin-top: 0px;    
}
.title {
    background-color: #d44137;
    width: 100%;
    margin: 0;
}
.pricing h2 {
    display: none;
}
.pricing {
    width: 100%;
}
.pricing p {
    width: 95%;
}
.pricing-1 {
    margin-left: 0;
}
.pricing-1 p {
    margin-left: 0;
}   
.content {
    width: 100%;
}
.sidebar {
    width: 100%;
}
.testimonials {
    width: 90%;
    float: left;
    margin: 0;
    padding: 10px 5% 10px 5%;
}
.records {
    width: 90%;
    float: left;
    padding: 10px 0 10px 5%;
}
.info {
    width: 90%;
    float: left;
    text-align: justify;
    padding: 10px 0 10px 5%;
}
.info img {
    display: none;
}
.company {
    width: 90%;
    float: left;
    padding: 10px 5% 20px 5%;
}
.video {
    width: 90%;
    float: left;
    margin-left: 5%;
    padding-bottom: 20px;
}
form {
    width: 90%;
    margin: 0 5% 30px 5%;
}
.map {
    width: 90%;
    margin: 0 5% 30px 5%;
}
.contact h1 {
    margin-left: 5%;
}
.footer {
    height: 70px;
}
.copyright {
    font-size: 9pt;
    text-align: center;
}
.social {
    display: none;
}
}

Something I noticed is that it works for mobile if I put max-device-width in the media query rather than max-width, but it doesn't work when I resize my browser screen. I've also seen that the device-width is now deprecated, so I don't really want to use it.

Any ideas?

Really appreciate the help! :)

EDIT: I missed the last closing brace but this hasn't affected how it looks on mobile. Thanks for picking that up!

Upvotes: 0

Views: 142

Answers (4)

Robbin van der Jagt
Robbin van der Jagt

Reputation: 796

Make sure you've added this to your html.

<meta name="viewport" content="width=device-width, initial-scale=1">

Upvotes: 1

Pedro Correia
Pedro Correia

Reputation: 813

Shouldn't be much of a problem, since you can't resize windows on mobile devices. Do further testing with physical devices and you might find it to be a non issue.

Also the deprecation of the device-with property simply means that it'll be remove in a future major release, so it probably safe to keep using until a better way arises.

Upvotes: 0

Undecided Dev
Undecided Dev

Reputation: 830

Just add Close curly brace for your @media screen and (max-width: 767px).

Upvotes: 0

Yatish Agrawal
Yatish Agrawal

Reputation: 462

you forget to close curly braces// @media screen and (max-width: 767px) {

Upvotes: 0

Related Questions