From:  M A <sokhter@gmail.com>
Date:  15 Apr 2017 17:33:58 Hong Kong Time
Newsgroup:  news.mozilla.org/mozilla.dev.mdc
Subject:  

Responsive design not working

NNTP-Posting-Host:  63.245.214.181

Hi

I am supposed to get an output like this Output of website


but its not working in the given viewport sizes...

Anyone tell me whats wrong with mine? Thanks

My code is this




Chicken Shop





Our Menu

Chicken

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Fish

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Sushi

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
/*Base Style*/ .heading { text-align: center; } .mainDiv{ vertical-align: center; } .Chicken { background-color: grey; border: 3px solid black; width: 250px; float: left; margin-left: 100px; margin-right: 30px; } .Chicken h3 { float: right; width:90px; background-color: pink; border: 3px solid black; border-top: 0; border-right: 0; margin-top: 0; text-align: center; } .Chicken article { clear: both; } .Fish { float:left; background-color: grey; border: 3px solid black; width: 250px; margin-right: 30px; } .Fish h3 { float: right; width:90px; background-color: pink; border: 3px solid black; border-top: 0; border-right: 0; margin-top: 0; text-align: center; } .Fish article { clear: both; } .Sushi { background-color: grey; border: 3px solid black; width: 250px; float:left; } .Sushi h3 { float: right; width:90px; background-color: pink; border: 3px solid black; border-top: 0; border-right: 0; margin-top: 0; text-align: center; } .Sushi article { clear: both; } @media screen and (max-width: 991px) and (min-width: 768px) { .Chicken{ width:40%; } .Fish{ width:40%; } .Sushi{ width:40%; margin-top: 20px; margin-left: 350px; } } @media screen and (max-width: 767px) { .Chicken{ width:40%; } .Fish{ width:40%; margin-left: 100px; } .Sushi{ width:40%; margin-left: 100px; } }