Codepen loses responsive CSS after moving to code sandbox

HTML-CSS
1

I have a codepen here.

If I press F12 and check the mobile layout on liveview, the text appears correctly centered, and horizontal scroll is disabled.

On moving to code sandbox:

  • text is no longer correctly centered,
  • picture is incorrectly sized,
  • horizontal scrolling appears.

Mobile display is not working in the chrome devtools emulator:

https://3vmtj4.csb.app/

I’ve made sure to add all libraries, include autoprefixer, and normalize.css. Also included the correct meta tags.

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

Media queries are all included.

@media screen and (max-width: 768px) and (min-width: 485px) {
  form {
  max-width: 70%;
  } 
}

Is there anything else I’ve missed?

2

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.