Responsive Qr-code-component using media queries

I did try to make the challenge responsive on ipad screen but failed. I also try using to media queries in my css like this /* MOBILE VIEW CSS */ @media only screen and (max-width: 480px) {

} /* IPAD VIEW CSS */ @media only screen and (max-width: 700px) {

}

but it didnt work. I cant put the both together therefore the challenge is not responsive on Ipad.

If anyone has solved this challenge and it displayed well on ipad, please help me out on how i can do that using on css media queries because i just finished a course on html and css alone i haven't learn and framework like boostrap.

Thank you Ibrahim Isiaka