Displaying Code Blocks Side-By-Side

Site URL: https://www.beautyamidsttheashes.com/hope2020

I have code blocks for circle img hover containers under "General Session Speakers". For whatever reason, the code blocks will not align in two columns no matter how I move around my layout and blocks. I've used spacer blocks to create columns to no avail. I've modified my CSS as much as possible and change the image sizes as well. nothing it working. they continually align in a vertical line rather than side by side. When in the editor of the section, the align perfect. When I save my edits and refresh the page, they stack vertically in one line again. 

Any suggestions? Does something the code or CSS seem to be inhibiting the column alignment that I am not seeing? 

PLEASE HELP! I've been at this for hours!

9 hours ago, hannahgrapp said:

For whatever reason, the code blocks will not align in two columns no matter how I move around my layout and blocks.

I can see that you've set up a 50/50 column, but from the code it looks as though all the Code Blocks have been placed in the same column. If I create a new Code Block and drag it to the right, I get two columns. Take a look at this screen-share and see if it helps: 

http://recordit.co/PYthmG3Zxn

On 12/12/2020 at 5:53 AM, paul2009 said:

I can see that you've set up a 50/50 column, but from the code it looks as though all the Code Blocks have been placed in the same column. If I create a new Code Block and drag it to the right, I get two columns. Take a look at this screen-share and see if it helps: 

http://recordit.co/PYthmG3Zxn

 

This is exactly what I am doing. I drag the code blocks side by side. but when I refresh the page, the code blocks revert to being stacked. See attached. 

https://recordit.co/elNlPI1l0O

Here are my codes and CSS in case something is conflicting that I am missing--

HTML:

<center><div class="speakerhoverimg-container">
  <img class="bio-image" src="https://images.squarespace-cdn.com/content/5c99185afb18203e6c45c90e/1607730317693-FIFYYR2YJXDHNX4ML8BJ/Mattie+Montgomery+2.png?format=300w"; alt="" />
  <div class="speakeroverlay"></div>
  <div class="speakerhover-container">
    <p class="bio"><b>Mattie Montgomery</b> <br>Pastor of The Altar Fellowship  
    </p>
    <div class="speakerbutton"><a href="/mattie-montgomery" target="_blank"/> ABOUT </a></div>
 </div>

CSS:

.speakerhoverimg-container {
  border-radius: 100%;
  position: relative;
  width: 200px;
  height: 200px;
}

.speakeroverlay {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.speakerhoverimg-container:hover .speakeroverlay {
  display: block;
  background: rgba(20, 187, 175, .7);
}

.bio-image {
  border-radius: 50%;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0;
}

.speakerhoverimg-container:hover .title {
  top: 90px;
}

.speakerhover-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.speakerbutton, .bio {
  width: 150px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
  color: #fff;
  font-size: 15px;
  padding: 0 0%;
}
  
.speakerbutton {
  margin-top: 2px;
}

.speakerbutton a {
  padding: 2px 6px;
  text-align: center;
  color: white;
  border: solid 1px white;
  z-index: 1;
}

.speakerhoverimg-container:hover .speakerbutton,
.speakerhoverimg-container:hover .bio {
  opacity: 1;
}

On 1/23/2021 at 7:16 AM, hannahgrapp said:

This is exactly what I am doing. I drag the code blocks side by side. but when I refresh the page, the code blocks revert to being stacked. See attached. 

https://recordit.co/elNlPI1l0O

 

Here are my codes and CSS in case something is conflicting that I am missing--

HTML:

<center><div class="speakerhoverimg-container">
  <img class="bio-image" src="https://images.squarespace-cdn.com/content/5c99185afb18203e6c45c90e/1607730317693-FIFYYR2YJXDHNX4ML8BJ/Mattie+Montgomery+2.png?format=300w"; alt="" />
  <div class="speakeroverlay"></div>
  <div class="speakerhover-container">
    <p class="bio"><b>Mattie Montgomery</b> <br>Pastor of The Altar Fellowship  
    </p>
    <div class="speakerbutton"><a href="/mattie-montgomery" target="_blank"/> ABOUT </a></div>
 </div>

 

CSS:

.speakerhoverimg-container {
  border-radius: 100%;
  position: relative;
  width: 200px;
  height: 200px;
}

.speakeroverlay {
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  transition: background 0.5s ease;
}

.speakerhoverimg-container:hover .speakeroverlay {
  display: block;
  background: rgba(20, 187, 175, .7);
}

.bio-image {
  border-radius: 50%;
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0;
}

.speakerhoverimg-container:hover .title {
  top: 90px;
}

.speakerhover-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.speakerbutton, .bio {
  width: 150px;
  text-align: center;
  opacity: 0;
  transition: opacity .35s ease;
  color: #fff;
  font-size: 15px;
  padding: 0 0%;
}
  
.speakerbutton {
  margin-top: 2px;
}

.speakerbutton a {
  padding: 2px 6px;
  text-align: center;
  color: white;
  border: solid 1px white;
  z-index: 1;
}

.speakerhoverimg-container:hover .speakerbutton,
.speakerhoverimg-container:hover .bio {
  opacity: 1;
}

Do you still need help on this?