How to make DIV with external content responsive on mobile?

Question

i'm trying to call webamp player on mobile page and i have no idea how to make this external app responsive on both platforms (desktop, mobile):(

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - WebAmp with Skin</title>
  
<head>

<body>
<!-- partial:index.partial.html -->
<div id="app"></div>
<script src="https://unpkg.com/webamp"></script>
<script>new Webamp({
    initialTracks: [{
        metaData: {
            artist: "The Boy is Mine",
            title: "Brandy & Monica",
        },
      
      // Be careful because mp3s use up a lot of space on your            account.
        url: "https://sadhost.neocities.org/music/Boy.mp3",
    }],
    
    initialSkin: {
        url: 
      // Find skins https://skins.webamp.org - download them and          host them on your website!
     "https://sadhost.neocities.org/etc/TetAtck.wsz"
    },}).renderWhenReady(app);</script>
<!-- partial -->
  
</body>
</html>

Please help, folks!

<meta name="viewport" content="width=device-width, initial-scale=1.0"> doesnt helped

Answer 1

use media queries are used to set the width of multiple devices like mobile, tabs, lap, desktop, and many others.

for example:

@media (max-width: 720px) {
     //here are your styling attributes for below 720px width devices
}

How to make DIV with external content responsive on mobile?

Question

1 answers

solution1
1 2023-01-24 04:35:18

How to make DIV with external content responsive on mobile?

Question

1 answers

solution1 1 2023-01-24 04:35:18

solution1
1 2023-01-24 04:35:18