[Elin Haremo Myhre]

Hi

 

I gro an error when I sent the message so I´m not sure if you received it. So I try one more time.

I have embedded a Spotify list in my right sidebar widget. It looks fine when I make the widget in the editor, but on the homepage, parts of the widget is cut off. Why is that and is it possible to fix?

Best regards,

Elin

[vako]

Hi Elin,

 

Thank you for reaching out again — and yes, I received your message this time.

The issue you’re describing with the Spotify embed being cut off in the sidebar is quite common and usually related to how iframes or embedded elements behave inside a widget area that has a fixed width or overflow restriction. It’s not a theme bug, but rather a styling conflict between Spotify’s embed code and the sidebar container.

Here’s what you can do to fix it:

Adjust the iframe width and height manually

In your Spotify embed code, look for something like this:

<iframe style=”border-radius:12px” src=”https://open.spotify.com/embed/playlist/XXXX&#8221; width=”300″ height=”380″ frameborder=”0″ allowfullscreen=””></iframe>

Replace the width value with 100% to make it responsive:

<iframe style=”border-radius:12px;width:100%;” src=”https://open.spotify.com/embed/playlist/XXXX&#8221; height=”380″ frameborder=”0″ allowfullscreen=””></iframe>

Add a small CSS fix

If the right edge is still being cut off, you can add this code under Appearance → Customize → Additional CSS:

.widget iframe {

max-width: 100% !important;

width: 100% !important;

}

This ensures the iframe fully fits inside the sidebar container across all screen sizes.

Check for caching or optimization plugins

If you’re using a cache or CSS optimization plugin (like Autoptimize or LiteSpeed Cache), clear the cache after making the change to see the effect immediately.

Once you apply these adjustments, the Spotify widget should display fully and correctly on your homepage.

 

Kind regards

[Author]

Posts