No that isn’t working because you added style and script tags in the css and script panels.
. Those panels should only contain the actual code and not html script tags. You should also use the settings to add external files such as jquery and bootstrap otherwise you get them being loaded after the code in the other codepen panels.
Only add html found inside the body tag in the html panel also.
I’ve set the code up for you here:
Now can you elaborate on the question?
The media queries you added would work if anyone could get down to 300px as that is smaller than any of my devices or browsers. The smallest you need to accommodate is 320px but you wouldn’t set the media query at 320px but at a size that is larger than that to accommodate various smaller devices. e.g. use 500px and below to make buttons full width.
I changed the media queries in your codepen to 500px so you can test on a desktop.
(The above answer is only concerned with the CSS aspects of the modal and does not relate to any js behaviours as such.)