Modifying this embed code so that the size is a certain percentage on mobile and desktop

Store Design
,

Topic summary

A user embedded a Spotify player in their store footer but encountered sizing issues—it displays correctly on desktop but appears too small on mobile devices.

Solution Provided:

  • Add a class name (e.g., class="music-player") to the iframe element
  • Insert responsive CSS media queries into the base.css file in the source code folder
  • Use @media screen and (max-width: 749px) to set mobile width (suggested: 200px)
  • Use @media screen and (min-width: 749px) to set desktop width (100%)

This approach allows different iframe dimensions for mobile versus desktop viewports. The discussion remains open with no confirmation from the original poster about implementation.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I am wanting to embed a spotify player to the footer of my store. I have already done so and the size is fine of desktop but not on mobile. The size is way too small for mobile. How can I make the sizes different for each option?

Here is my store link: therewearaffair.com

Here is the embed code I used.

<iframe style="border-radius:12px" src="https://open.spotify.com/embed/album/4mzOZs7RJET1HwESKUwDgQ?utm_source=generator" width="100%" height="152" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

Thank you,

2

Hello @therewearaffair , to do this, you need to set a class name for your iframe tag. I can give you the following example:

<iframe class="music-player" src="https://open.spotify.com/embed/album/4mzOZs7RJET1HwESKUwDgQ?utm_source=generator" frameBorder="0" allowfullscreen="" allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture" loading="lazy"></iframe>

Then find the base.css file in the source code folder and add the following code:

@media screen and (max-width: 749px) {
  .music-player {
   width: 200px;
  }
}

@media screen and (min-width: 749px) {
  .music-player {
   width: 100%;
  }
}

You can adjust the width to your liking @therewearaffair