CODEWITHSUNDEEP
htmlcssresponsive-design
user2069448
user2069448

Reputation: 37

Responsive media queries not working in css

I am working on site ,and implement responsive design on it ,and i am new to this, and using http://resizemybrowser.com/ for testing my site,

Everything is working fine on when i resize my browser(chrome) like header,middle ,footer part resize on the browser window except only Main middle part of site is not working well after 757px , the css style for main part is " .hero " and style with main style:

.hero {width: 930px;color: #444;margin: 0 auto;} And media queries for .hero is
@media (max-width: 979px).hero {width: 750px;color: #444;margin: 0 auto;}
@media (max-width: 767px).hero {width: 650px;color: #444;margin: 0 auto;}
and as same for Max width:1200px , max width:480px etc ...

the problem is .hero main part is not responsive After width of 757px always shows that .hero width is 750px while the browser window on 320 , 480 ,640 ,720 px and after that on other width like (800 ,960,1024,1280,1366 px ) gives good responsive result & .hero width changes.
I am stuck on this main part , please figure out some solution for that ,,, thanks in advance

Upvotes: 0

Views: 1152

Answers (1)

Michal
Michal

Reputation: 3642

Your media query needs another brackets, like here:

@media (max-width: 979px) {
    .hero {
        width: 750px;
        color: #444;
        margin: 0 auto;
    }
}

Upvotes: 3

Related Questions