Я не могу избавиться от нежелательных пробелов между iframe и абзацем в отзывчивом - PullRequest
Новая
       71

Я не могу избавиться от нежелательных пробелов между iframe и абзацем в отзывчивом

0 голосов
/ 21 апреля 2020

Я знаю, что несколько раз задавались похожие вопросы, но я искал и пытался найти несколько ответов, и, похоже, ни один из них не решил мою конкретную проблему. Я работаю над сайтом для музыканта, на котором несколько встроенных фреймов, созданных на bandcamp.com, сочетаются с кратким описанием альбома ниже. При изменении размера окна просмотра ниже 700 пикселей, между iframe и элементом <p> появляется большое белое пространство, и я не могу понять, как от него избавиться (самое близкое, что я установил, это установка поля -top для элементов <p> до -200px, но это приносит другие проблемы, и должно быть лучшее решение. Вот код, который я использую.

HTML: 

<div id="music gallery" class="musicembeds" width="700px">
        <iframe style="border: 0; width: 100%; height: 820px;" src="https://bandcamp.com/EmbeddedPlayer/album=2462869077/size=large/bgcol=ffffff/linkcol=2ebd35/tracklist=false/transparent=true/" seamless><a href="http://hollyovertonmusic.bandcamp.com/album/the-woman-on-the-beach">The Woman On The Beach by Holly Overton</a></iframe>
        <p style="padding-bottom:20px">THE WOMAN ON THE BEACH, 2019 is a narrative concept album that I wrote and recorded in my apartment. I visited fellow musicians with my portable audio equipment to record their instruments that all together created symphonic arrangements.</p>
</div>

CSS: 

.musicembeds {
    display: block;
    max-width: 700px;
}

.musicembeds iframe {
    display:block;
    align-content: flex-end;
}

.musicembeds p {
    display:block;
    align-content: flex-start;
}


@media only screen and (max-width: 700px) {
    .musicembeds p {
        margin-top: 0px;
    }

    .musicembeds iframe {
        height:auto;
    }   
}
...