Jump to content

Displaying Code Blocks Side-By-Side

Recommended Posts

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!

Screen Shot 2020-12-11 at 8.42.09 PM.png

Screen Shot 2020-12-11 at 8.41.46 PM.png

Link to comment
  • Replies 3
  • Views 1.7k
  • Created
  • Last Reply
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

 

About me: I'm Paul. A SQSP User for 18 yrs, I joined Circle when it launched in 2016 and have been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing expertise and extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with a Squarespace Domain

Link to comment
  • 1 month later...
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;
}

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.