I embedded this code of my Apple Music playlist into the custom liquid section and I’m having trouble getting it centered. can anyone help?
Topic summary
A user is trying to center an embedded Apple Music playlist iframe within a custom liquid section on their store but cannot achieve proper alignment.
Attempted Solution:
Another participant suggested adding margin: 0 auto; to the iframe’s inline CSS style attribute to center it horizontally.
Current Status:
The proposed CSS fix did not work. The helper has requested a link to the page where the code was implemented to further diagnose the centering issue.
Technical Context:
The discussion involves HTML iframe embedding and CSS styling within a Shopify custom liquid section.
Hi @justen213
You can try this one
<iframe allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write" frameborder="0" height="450" style="width:100%;margin: 0 auto; max-width:660px;overflow:hidden;border-radius:10px;" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-storage-access-by-user-activation allow-top-navigation-by-user-activation" src="https://embed.music.apple.com/us/playlist/justen-reyes/pl.u-06oxxpbTY58LoG"></iframe>
Unfortunately it didn’t work
Could you share page link that you added that embed code?