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

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

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

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

tuanphan · February 19

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

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

any luck?

tuanphan · February 22

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

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

AmalieCharlesworth · March 3

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

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?

Question

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

Posted Images

13 answers to this question

Recommended Posts

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources