iframe size arrangement on bootstrap 5

<div class="media-body">
    <h5 class="mt-0">Kan Tahlili Sonucu - </h5>
    <div class="ratio ratio-4x3 w-100 w-md-50 text-center d-flex align-items-center justify-content-center" style="margin: 0 auto;">
        <iframe src="sonuc.pdf" title="YouTube video" allowfullscreen></iframe>
    </div>
    <style>
    @media (min-width: 768px) {
        .ratio-4x3 {
            width: 50%;
            height: 0;
            padding-bottom: 75%; /* 4:3 aspect ratio */
        }
    }
    @media (max-width: 767px) {
        .ratio-4x3 {
            width: 100%;
            height: 0;
            padding-bottom: 75%; /* 4:3 aspect ratio */
        }
    }
    </style>

    <p class="mt-3">Explanation: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec elit eget justo ullamcorper aliquet. Sed id mauris auctor, ultrices nunc id, lacinia turpis.</p>
</div>

In mobile this code works just the way it should be but in desktop it should be a little smaller. Can anyone show me a way to change the size in desktop without touching the mobile? I have almost tried everything but I still could not figure it out.

The problem is in the iframe but not in the media-body. And if you want to bully me please just don’t answer the question and leave the page. Thank you.

I wanted it to be smaller in the desktop but it it keeps failing in sizes.

>Solution :

I thinkyou want to adjust the size of the element based on the screen width, with different sizes for mobile and desktop. You’ve already set up media queries for this purpose, but it seems like the styles are not having the desired effect.

Here’s a modified version of your code to make the smaller on desktop while keeping the current size on mobile:

@media (min-width: 768px) {
  .ratio-4x3 {
    width: 50%;
    height: 0;
    padding-bottom: 37.5%; /* Adjusted for 4:3 aspect ratio in desktop */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto; /* Center the container horizontally */
  }
}

@media (max-width: 767px) {
  .ratio-4x3 {
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* 4:3 aspect ratio in mobile */
  }
}

/* Additional style for iframe size on desktop */
@media (min-width: 992px) {
  iframe {
    width: 100%; /* You can adjust this value based on your needs */
    max-width: 600px; /* Set a maximum width for the iframe */
    height: 100%;
  }
}