How can I get my custom code blocks to quit stacking on top of one another?

sll1017 · September 4, 2019

I have 3 custom code blocks that are next to one another. When I push "save" the 3 code blocks stack on top of one another. Does anyone know why my code keeps stacking rather than sitting next to each other? I'm not sure what I'm doing wrong.

<html>
<head>
<style>
.collapsible {
 background-color: #225d71;
 color: white;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 15px;
}

.active, .collapsible:hover {
 background-color: #89c7c0;
}

.content {
 padding: 0 18px;
 display: none;
 overflow: hidden;
 background-color: #f1f1f1;
}
</style>
</head>
<body>

 </p>
 </div>
 </button>

Edited September 4, 2019 by sll1017
Initial Revision

kiriako · July 27, 2020

I have this same problem, did you ever figure it out?

Edited July 27, 2020 by kiriako
added more

tuanphan · July 28, 2020

18 hours ago, kiriako said:

I have this same problem, did you ever figure it out?

If you share link to page where you inserted Code Block. We can help easier.

kiriako · July 28, 2020

Thanks, I figured out the problem. I just needed to add <center> </center> at the start and end of each code block. It fixed the issue.

AmalieCharlesworth · February 17, 2021

Hi,

I'm still having the same issue if anyone can help!

<center></center> doesnt work for me

craveandco.com

password: Amalie

AmalieCharlesworth · February 18, 2021

i'm using this in my custom css

.image-swap img:nth-child(1) {
position: absolute;
transition: 1s;
}
.image-swap img:nth-child(1):hover {
opacity: 0;
}

then this in my code blocks:

the code works for changing the image on hover but when i do it with multiple codes they wont sit next to eachother in grid format.

AmalieCharlesworth · February 18, 2021

I want it like this but its coming out like this! thank you so much in advance!

tuanphan · February 19, 2021

Can you paste all codes in 8 Code Blocks here? I think some code has problem..Not sure, need to check code.

AmalieCharlesworth · February 19, 2021

Thank you so much for responding! I have used the same code for all code blocks. I have used different images for each and different clickthrough links. I will also be adding more images to keep building the grid. Please let me know if you need access to the site.

1.

<img src="

https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d31cd5f9f9002e0ca9898/1613574605876/The+Purefoy+Arms.jpg">

</a>

2.

<img src="

https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d29e84ee96901dec0b80a/1613572589256/50+best+bars.jpg">

</a>

3.

</a>

4.

</a>

5.

</a>

6.

<img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d3e8006ab4301905ef8cd/1613577858238/the+fox%27s+smoke+shack.jpg

">

</a>

7.

<img src="

https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d2844de8c73025156bdf8/1613572165019/Bonne+Fraquette.jpg">

</a>

8.

</a>

I followed a tutorial from this youtube link

AmalieCharlesworth · February 21, 2021

any luck?

tuanphan · February 22, 2021

16 hours ago, AmalieCharlesworth said:

any luck?

All code is invalid. You need closing </div> tag.

Eg with Code 1. Your code

<a href="https://www.instagram.com/bonnefranquetteuk/?hl=en">

  <div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d31c506ab4301905d69c7/1613574598705/the+purefoy+.jpg">

  <img src="

https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d31cd5f9f9002e0ca9898/1613574605876/The+Purefoy+Arms.jpg">

</a>

It should be

<a href="https://www.instagram.com/bonnefranquetteuk/?hl=en">

  <div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d31c506ab4301905d69c7/1613574598705/the+purefoy+.jpg">

  <img src="

https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d31cd5f9f9002e0ca9898/1613574605876/The+Purefoy+Arms.jpg">
  </div>
</a>

(I added </div> above </a>)

Do similar for other Code Blocks

AmalieCharlesworth · February 22, 2021

Thank you! Works perfectly - you've made my day.

AmalieCharlesworth · March 3, 2021

Hi,

Im so sorry I've encountered one more problem. Its on the same site.

There are now two gaps in the 'People' section. I cant get rid of them.

There are 8 pictures; the code for each picture is:

<a href="https://www.instagram.com/kaeshibata_/">Kae Shibata</a>

<a href="https://www.instagram.com/svenhansonchef/ ">Sven Hanson-Britt</a>

<a href="https://www.instagram.com/chefphillips/?hl=en ">Tom Phillips</a>

<a href="https://www.instagram.com/yann_florio/?hl=en">Yann Florio</a>

<a href="https://www.instagram.com/gordon_chef/ ">Gordon Stott</a>

<a href="https://www.instagram.com/leewestcott/?hl=en"> Lee Westcott </a>

<a href="https://www.instagram.com/tomcenci/?hl=en">Tom Cenci</a>

the code in css is:

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.7rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 0.5;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.3rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 2;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

website: craveandco.com

password:Amalie

tuanphan · March 6, 2021

On 3/3/2021 at 7:02 PM, AmalieCharlesworth said:

Hi,

Im so sorry I've encountered one more problem. Its on the same site.

There are now two gaps in the 'People' section. I cant get rid of them.

There are 8 pictures; the code for each picture is:

<a href="https://www.instagram.com/kaeshibata_/">Kae Shibata</a>

<a href="https://www.instagram.com/svenhansonchef/ ">Sven Hanson-Britt</a>

<a href="https://www.instagram.com/chefphillips/?hl=en ">Tom Phillips</a>

<a href="https://www.instagram.com/guy_owen/ ">Guy Owen</a>

<a href="https://www.instagram.com/yann_florio/?hl=en">Yann Florio</a>

<a href="https://www.instagram.com/gordon_chef/ ">Gordon Stott</a>

<a href="https://www.instagram.com/leewestcott/?hl=en"> Lee Westcott </a>

<a href="https://www.instagram.com/tomcenci/?hl=en">Tom Cenci</a>

the code in css is:

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.7rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 0.5;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.5); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
}
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.3rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 2;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}

website: craveandco.com

password:Amalie

Hi. Which gap?

How can I get my custom code blocks to quit stacking on top of one another?

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

AmalieCharlesworth

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources