Question 225231 in Html Question posted in
Some basic documentation can be found here.

Large space between two iFrames (HTML/CSS)

So I have this simple website called Quest Talk (questtalk.neocities.org)

Between the Google Form and the Substack Form there is a weird user-unfriendly space. However it is only visible on desktop browser apps and not on mobile browser apps. There is no specific CSS setting. (See full CSS code below)

My question: How can I make sure that space is used as efficiently as possible and there is not such a huge gap between the two frames?

My code:

body {
  background-color: #D6FFC7;
  color: #1B3B3A;
  margin-left: 0;
  margin-right: 0;
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.2em;
  text-align: center;
  padding-bottom: 12vh;
  line-height: 1.8;
}

header {
  position: fixed;
  width: 100%;
  background-color: #D6FFC7;
  margin-left: 0;
  color: #1B3B3A;
  font-weight: bold;
  /* padding: 1rem; */
  text-align: center;
  /* margin-bottom: 2rem; /* Add margin */
}

header h2 {
  margin-top: 0;
}

#language-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  margin-left: 0;
  font-style: italic;
  /* padding: 1rem; */
}

#question-container {
  background-color: #1B3B3A;
  color: white;
  /* font-weight: bold; */
  font-size: calc(2.0*(0.75vh + 0.8vw));
  /* padding: 2rem; */
  text-align: center;
  margin-left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50vh;
}

#refresh-btn {
  background-color: #1B3B3A;
  color: white;
  margin-left: 0;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  border: none;
  font-family: 'Courier New', Courier, monospace;
}


/* .arrow {
  font-size: 2em;
  margin-top: 20px;
  text-align: center;
} */

#about-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
  /* padding: 1rem; Add padding */
}

#legal-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #D6FFC7;
  margin-left: 0;
  color: #1B3B3A;
  font-style: italic;
  /* padding: 1rem; */
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
}

p {
  margin: 1rem 0;
  line-height: 1.5;
}

hr {
  border: none;
  border-top: 2vh solid #1B3B3A;
  height: 1vh;
  margin: 0;
}

a {
  color: #1B3B3A;
  /* This sets the color of unvisited links */
}

a:visited {
  color: #1B3B3A;
  /* This sets the color of visited links */
}

a:hover {
  color: #1B3B3A;
  /* This sets the color of links when the mouse is over them */
}

a:active {
  color: #1B3B3A;
  /* This sets the color of links when they are clicked */
}
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLScKB_z1KgvVb9YI8TsqxESmbC8ls1vEfvv_9oJMD6O1g6gc3Q/viewform?embedded=true" width="100%" height="790" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe> To stay up to date and show support,
click 'Subscribe'
<iframe src="https://questtalk.substack.com/embed" width="100%" style="border:0" frameborder="0" scrolling="no">
              </iframe>

I used <br> and <p> but that did not make a difference at all on Desktop browsers.

Tags:

2

Answers


  1. 0

    Try This:

    body {
     background-color: #D6FFC7;
     color: #1B3B3A;
     margin-left: 0;
     margin-right: 0;
   font-family: 'Courier New', Courier, monospace;
  font-size: 1.2em;
  text-align: center;
  padding-bottom: 12vh;
  line-height: 1.8;
}

header {
  position: fixed;
  width: 100%;
  background-color: #D6FFC7;
  margin-left: 0;
  color: #1B3B3A;
  font-weight: bold;
  /* padding: 1rem; */
  text-align: center;
  
  /* margin-bottom: 2rem; /* Add margin */
}

header h2 {
  margin-top: 0;
}


#language-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
  margin-left: 0;
  font-style: italic;
  /* padding: 1rem; */
  }

#question-container {
background-color: #1B3B3A ;
color: white;
/* font-weight: bold; */
font-size : calc(2.0*(0.75vh + 0.8vw)) ;
/* padding: 2rem; */
text-align: center;
margin-left: 0;
display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 50vh;
}

#refresh-btn {
  background-color: #1B3B3A ;
  color: white ;
  margin-left: 0;
  font-size: 1em ;
  font-weight: bold;
  cursor: pointer ;
  border:none;
  font-family: 'Courier New', Courier, monospace;
}

/* .arrow {
  font-size: 2em;
  margin-top: 20px;
  text-align: center;
} */

 #about-container {
   background-color: #D6FFC7;
   color: #1B3B3A;
/* padding: 1rem; Add padding */
} 

#legal-container {
  background-color: #D6FFC7;
  color: #1B3B3A;
  }


footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #D6FFC7;
  margin-left: 0;
  color: #1B3B3A;
  font-style: italic;
  /* padding: 1rem; */
  text-align: center;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

p {
  margin: 1rem 0;
  line-height: 1.5;
}

hr {
  border: none;
  border-top: 2vh solid #1B3B3A;
  height: 1vh;
  margin: 0;
}

a {
  color: #1B3B3A; /* This sets the color of unvisited links */
}

a:visited {
  color: #1B3B3A; /* This sets the color of visited links */
}

a:hover {
  color: #1B3B3A; /* This sets the color of links when the mouse is over them */
}

a:active {
  color: #1B3B3A; /* This sets the color of links when they are clicked */
}
    <iframe    src="https://docs.google.com/forms/d/e/1FAIpQLScKB_z1KgvVb9YI8TsqxESmbC8ls1vEfvv_9oJMD6O1g6gc3Q/viewform?embedded=true" width="100%" height="600" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
        To stay up to date and show support, click 'Subscribe'
        <iframe src="https://questtalk.substack.com/embed" width="100%" style="border:0" frameborder="0"  scrolling="no">
              </iframe>

    Explanation:

    Simply the first iframe height is set to 790 which is more than the form needs hence the gap created by the first iframe expanding on the lower side.

    I just changed the height to 600 instead so it takes as much space as it need.

    Login or Signup to reply.
  2. 0

    The issue is in that the upper iframe has height set to 790, and that value highly exceeds the size of HTML document inside. For example if you set the height to 630, the space will be much smaller.

    It’s not possible to set the height based on content height of iframe content purely with CSS, the only solution would be getting the content height using JavaScript by accessing the content with myIframe.contentDocument, however your iframe is cross-origin so this won’t work. Another solution would be with postMessage(), but you can’t control the content of iframe.

    So, for now you’ll need to use an absolute height.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search