Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
1 reply
roycwilliams

Adjusting iframe size for mobile responsiveness in Tailwind CSS

I am currently working on a project where I have a grid layout containing an iframe with audio content. I'm using Tailwind CSS for styling, and I'm facing an issue with making the iframe fit the mobile responsive screen. The first picture is my website and the second picture is how I want my plug in for apple music to fit.

The issue is that the iframe doesn't adjust properly for mobile screens. I've tried adjusting the width, height, maxWidth, and maxHeight properties, but I'm not achieving the desired responsiveness. If anyone can help with this that'll be lovely!


<div className='bg-black rounded-lg shadow-xl lg:col-span-2 flex'>
  <div className='w-2/5 h-full hidden lg:flex lg:visible'>
    {/* ... (omitted for brevity) */}
  </div>
  <div className='w-full h-full flex flex-col overflow-hidden'>
    <div className='w-full h-1/3 border flex items-center'>
      <h2 className='uppercase text-sm lg:text-xl font-clash tracking-widest ml-4 font-bold text-white'>Current Rotation</h2>
    </div>
    <div className='flex w-[100%] lg:w-[60%] border h-auto mx-auto transition ease-in duration-150'>
      {sounds.map((slide, index) => (
        <iframe 
          allow="autoplay *; encrypted-media *; fullscreen *; clipboard-write"
          width="100%"
          height="200"
          key={index}
          style={{
            maxWidth: '500px',
            maxHeight: '200px',
            overflow: 'hidden',
            borderRadius: '10px',
            padding: '0 5px'
          }}
          src={slide}
        ></iframe>
      ))}
    </div>
  </div>
</div>
Screen_Shot_2023-11-11_at_4.05.23_PM.png
Screen_Shot_2023-11-11_at_4.08.54_PM.png
Was this page helpful?