Mkld91 Mkld91 - 19 days ago 7
CSS Question

CSS Responsive Magento

I'm working on making a responsive version of a magento theme on this website https://makedaadolls.com/store/

Why when I resize my window less than 750px, the html tag still has 980px of width?

Here is my css rule.

@media only screen and (max-device-width: 750px) and (min-device-width: 320px){
html {
width: 100%;
max-width: 750px;
}
}

Answer

You need at least the responsive meta tag in your site header:

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

Then you need to make sure your header and main nav are also responsive (they currently are not). Basically this means all your containers need to have a max-width instead of a width. You won't need to set your html to be responsive using your media query in this case.