Растягивание контента по размеру страницы рабочего стола с помощью CSS

Question

Как растянуть этот контент, чтобы он соответствовал полной ширине страницы на рабочем столе?

HTML:

<div class="entry-content">
<blockquote class="wp-embedded-content" data-secret="paBu4nyBJV">. 
<p>. <a href="https://tbwdrawingprize.artopps.co.uk/online- 
entry/">Online Entry</a></p></blockquote>
<p><iframe title="&#8220;Online Entry&#8221; &#8212; TBW Drawing 
Prize" class="wp-embedded-content" sandbox="allow-scripts" 
security="restricted" style="position: absolute; clip: rect(1px, 
1px, 1px, 1px);" src="https://tbwdrawingprize.artopps.co.uk/online- 
entry/embed/#?secret=paBu4nyBJV" data-secret="paBu4nyBJV" 
width="600" height="338" frameborder="0" marginwidth="0" 
marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p><embed style="width: 500px; height: 300px;"

https://adsler.co.uk/adsler-blog/

Answer 1

Если я не понимаю вашу проблему, вам нужно просто установить ширину на 100%. Я попытался отредактировать его по ссылке, которую вы разместили, и она, кажется, хорошо соответствует ширине экрана.

<div class="entry-content">
<blockquote class="wp-embedded-content" data-secret="paBu4nyBJV">. 
<p>. <a href="https://tbwdrawingprize.artopps.co.uk/online- 
entry/">Online Entry</a></p></blockquote>
<p><iframe title="&#8220;Online Entry&#8221; &#8212; TBW Drawing 
Prize" class="wp-embedded-content" sandbox="allow-scripts" 
security="restricted" style="position: absolute; clip: rect(1px, 
1px, 1px, 1px);" src="https://tbwdrawingprize.artopps.co.uk/online- 
entry/embed/#?secret=paBu4nyBJV" data-secret="paBu4nyBJV" 
width="100%" height="338" frameborder="0" marginwidth="0" 
marginheight="0" scrolling="no"></iframe></p>
<p>&nbsp;</p>
<p><embed style="width: 100%; height: 300px;"

Answer 2

Если вы ссылаетесь на iframe - в атрибуте ширины установлено значение 600px. Если вы замените его на 100%, он заполнит ширину родительского элемента.

<iframe title="&#8220;Online Entry&#8221; &#8212; TBW Drawing 
Prize" class="wp-embedded-content" sandbox="allow-scripts" 
security="restricted" style="position: absolute; clip: rect(1px, 
1px, 1px, 1px);" src="https://tbwdrawingprize.artopps.co.uk/online- 
entry/embed/#?secret=paBu4nyBJV" data-secret="paBu4nyBJV" 
width="100%" height="338" frameborder="0" marginwidth="0" 
marginheight="0" scrolling="no"></iframe>

Если вы хотите сделать изменение универсальным для всех тегов iframe и embed, попробуйте следующее css

iframe, embed {
  width: 100% !important
}

Answer 3

Это происходит потому, что вы применили встроенный стиль ширины к своим тегам embed и iframe, как вы можете видеть здесь:

и

(со страницы просмотра: Chrome Devtools)

Измените их на width:100%, и вы будете готовыидти!Ура!