Why is this text moving when I increase my view window size?
I have the rest of my main body below a div containing my iframe video at the top. I've used an absolute unit for the iframe and div container.
I can't figure out why the text below my iframe is moving down the page when I widen my view window.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
@keyframes righttoleft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@media only screen /* Tablet */
.vid-1 {
display: inline-block;
justify-content: center;
width: 1000px;
}
iframe {
width: 100%;
height: 562px;
position: absolute;
display: block;
top: 0;
left: 0;
}<main>
<div class="vid-1 lefttoright">
<iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h1 class="text-style">Common Questions</h1>
<div class="line"></div>
</main>html css css3
edited Jan 2 at 9:33
לבני מלכה
10.6k1827
asked Jan 2 at 9:32
MaximilianMaximilian
867
add a comment |
I have the rest of my main body below a div containing my iframe video at the top. I've used an absolute unit for the iframe and div container.
I can't figure out why the text below my iframe is moving down the page when I widen my view window.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
@keyframes righttoleft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@media only screen /* Tablet */
.vid-1 {
display: inline-block;
justify-content: center;
width: 1000px;
}
iframe {
width: 100%;
height: 562px;
position: absolute;
display: block;
top: 0;
left: 0;
}<main>
<div class="vid-1 lefttoright">
<iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h1 class="text-style">Common Questions</h1>
<div class="line"></div>
</main>html css css3
edited Jan 2 at 9:33
לבני מלכה
10.6k1827
asked Jan 2 at 9:32
MaximilianMaximilian
867
1
What is the expected result?
– Islam Elshobokshy
Jan 2 at 9:35
add a comment |
I have the rest of my main body below a div containing my iframe video at the top. I've used an absolute unit for the iframe and div container.
I can't figure out why the text below my iframe is moving down the page when I widen my view window.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
@keyframes righttoleft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@media only screen /* Tablet */
.vid-1 {
display: inline-block;
justify-content: center;
width: 1000px;
}
iframe {
width: 100%;
height: 562px;
position: absolute;
display: block;
top: 0;
left: 0;
}<main>
<div class="vid-1 lefttoright">
<iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h1 class="text-style">Common Questions</h1>
<div class="line"></div>
</main>html css css3
edited Jan 2 at 9:33
לבני מלכה
10.6k1827
asked Jan 2 at 9:32
MaximilianMaximilian
867
I have the rest of my main body below a div containing my iframe video at the top. I've used an absolute unit for the iframe and div container.
I can't figure out why the text below my iframe is moving down the page when I widen my view window.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
@keyframes righttoleft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@media only screen /* Tablet */
.vid-1 {
display: inline-block;
justify-content: center;
width: 1000px;
}
iframe {
width: 100%;
height: 562px;
position: absolute;
display: block;
top: 0;
left: 0;
}<main>
<div class="vid-1 lefttoright">
<iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h1 class="text-style">Common Questions</h1>
<div class="line"></div>
</main> .vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
@keyframes righttoleft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@media only screen /* Tablet */
.vid-1 {
display: inline-block;
justify-content: center;
width: 1000px;
}
iframe {
width: 100%;
height: 562px;
position: absolute;
display: block;
top: 0;
left: 0;
}<main>
<div class="vid-1 lefttoright">
<iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h1 class="text-style">Common Questions</h1>
<div class="line"></div>
</main> .vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
display: block;
top: 0;
left: 0;
}
@keyframes righttoleft {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0);
}
}
@media only screen /* Tablet */
.vid-1 {
display: inline-block;
justify-content: center;
width: 1000px;
}
iframe {
width: 100%;
height: 562px;
position: absolute;
display: block;
top: 0;
left: 0;
}<main>
<div class="vid-1 lefttoright">
<iframe src="https://www.youtube.com/embed/momqQl-9-tg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<h1 class="text-style">Common Questions</h1>
<div class="line"></div>
</main>html css css3
html css css3
edited Jan 2 at 9:33
לבני מלכה
10.6k1827
asked Jan 2 at 9:32
MaximilianMaximilian
867
edited Jan 2 at 9:33
לבני מלכה
10.6k1827
asked Jan 2 at 9:32
MaximilianMaximilian
867
edited Jan 2 at 9:33
לבני מלכה
10.6k1827
edited Jan 2 at 9:33
לבני מלכה
10.6k1827
edited Jan 2 at 9:33
לבני מלכה
10.6k1827
10.6k1827
asked Jan 2 at 9:32
MaximilianMaximilian
867
asked Jan 2 at 9:32
MaximilianMaximilian
867
asked Jan 2 at 9:32
MaximilianMaximilian
867
867
1
What is the expected result?
– Islam Elshobokshy
Jan 2 at 9:35
add a comment |
1
What is the expected result?
– Islam Elshobokshy
Jan 2 at 9:35
1
1
What is the expected result?
– Islam Elshobokshy
Jan 2 at 9:35
What is the expected result?
– Islam Elshobokshy
Jan 2 at 9:35
add a comment |
2 Answers
2
active
oldest
votes
When you set paddings/margins with percentages (i.e. padding-bottom: 56%;), the percentage is relative to the element's width. So, when you set an element's width to 100% and widen the window, the element will get wider, increasing your bottom padding accordingly.
Try to use absolute units for the bottom padding, such as padding-bottom: 50px. Let me know if that helps.
answered Jan 2 at 9:37
Sagi RikaSagi Rika
8611
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
Happy to help :)
– Sagi Rika
Jan 2 at 10:01
add a comment |
padding-bottom: 56%; this css is the cause of hiding your header text. give a constant padding.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
edited Jan 2 at 9:49
לבני מלכה
10.6k1827
answered Jan 2 at 9:46
Gaurav RanaGaurav Rana
36018
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003966%2fwhy-is-this-text-moving-when-i-increase-my-view-window-size%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
When you set paddings/margins with percentages (i.e. padding-bottom: 56%;), the percentage is relative to the element's width. So, when you set an element's width to 100% and widen the window, the element will get wider, increasing your bottom padding accordingly.
Try to use absolute units for the bottom padding, such as padding-bottom: 50px. Let me know if that helps.
answered Jan 2 at 9:37
Sagi RikaSagi Rika
8611
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
Happy to help :)
– Sagi Rika
Jan 2 at 10:01
add a comment |
When you set paddings/margins with percentages (i.e. padding-bottom: 56%;), the percentage is relative to the element's width. So, when you set an element's width to 100% and widen the window, the element will get wider, increasing your bottom padding accordingly.
Try to use absolute units for the bottom padding, such as padding-bottom: 50px. Let me know if that helps.
answered Jan 2 at 9:37
Sagi RikaSagi Rika
8611
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
Happy to help :)
– Sagi Rika
Jan 2 at 10:01
add a comment |
When you set paddings/margins with percentages (i.e. padding-bottom: 56%;), the percentage is relative to the element's width. So, when you set an element's width to 100% and widen the window, the element will get wider, increasing your bottom padding accordingly.
Try to use absolute units for the bottom padding, such as padding-bottom: 50px. Let me know if that helps.
answered Jan 2 at 9:37
Sagi RikaSagi Rika
8611
When you set paddings/margins with percentages (i.e. padding-bottom: 56%;), the percentage is relative to the element's width. So, when you set an element's width to 100% and widen the window, the element will get wider, increasing your bottom padding accordingly.
Try to use absolute units for the bottom padding, such as padding-bottom: 50px. Let me know if that helps.
answered Jan 2 at 9:37
Sagi RikaSagi Rika
8611
answered Jan 2 at 9:37
Sagi RikaSagi Rika
8611
answered Jan 2 at 9:37
Sagi RikaSagi Rika
8611
answered Jan 2 at 9:37
Sagi RikaSagi Rika
8611
8611
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
Happy to help :)
– Sagi Rika
Jan 2 at 10:01
add a comment |
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
Happy to help :)
– Sagi Rika
Jan 2 at 10:01
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
Happy to help :)
– Sagi Rika
Jan 2 at 10:01
Happy to help :)
– Sagi Rika
Jan 2 at 10:01
add a comment |
padding-bottom: 56%; this css is the cause of hiding your header text. give a constant padding.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
edited Jan 2 at 9:49
לבני מלכה
10.6k1827
answered Jan 2 at 9:46
Gaurav RanaGaurav Rana
36018
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
add a comment |
padding-bottom: 56%; this css is the cause of hiding your header text. give a constant padding.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
edited Jan 2 at 9:49
לבני מלכה
10.6k1827
answered Jan 2 at 9:46
Gaurav RanaGaurav Rana
36018
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
add a comment |
padding-bottom: 56%; this css is the cause of hiding your header text. give a constant padding.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
edited Jan 2 at 9:49
לבני מלכה
10.6k1827
answered Jan 2 at 9:46
Gaurav RanaGaurav Rana
36018
padding-bottom: 56%; this css is the cause of hiding your header text. give a constant padding.
.vid-1 {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56%;
margin: 8px 0 0 0;
}
edited Jan 2 at 9:49
לבני מלכה
10.6k1827
answered Jan 2 at 9:46
Gaurav RanaGaurav Rana
36018
edited Jan 2 at 9:49
לבני מלכה
10.6k1827
edited Jan 2 at 9:49
לבני מלכה
10.6k1827
edited Jan 2 at 9:49
לבני מלכה
10.6k1827
10.6k1827
answered Jan 2 at 9:46
Gaurav RanaGaurav Rana
36018
answered Jan 2 at 9:46
Gaurav RanaGaurav Rana
36018
answered Jan 2 at 9:46
Gaurav RanaGaurav Rana
36018
36018
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
add a comment |
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
perfect! Thanks very much.
– Maximilian
Jan 2 at 10:01
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54003966%2fwhy-is-this-text-moving-when-i-increase-my-view-window-size%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
What is the expected result?
– Islam Elshobokshy
Jan 2 at 9:35