Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


sll1017

Question

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 by sll1017
Initial Revision
Link to post
  • Answers 13
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

Posted Images

13 answers to this question

Recommended Posts

  • 0
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.

Link to post
  • 0

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:

<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>

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. 

 

Link to post
  • 0

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.

<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>

 

2.

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

  <div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d29e04ee96901dec0b7ca/1613572577666/50+of+the+worlds+best+bars.jpg">

  <img src="

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

</a>

 

3.

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

  <div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d3ee20364970ec5b4ea8e/1613577956163/The+woolfs+kitchen+logo+.jpg">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d3ee20364970ec5b4ea8e/1613577956163/The+woolfs+kitchen+logo+.jpg">

</a>

 

4.

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

  <div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d2ca3c07de639564dc9aa/1613573284412/terrone+copy.jpg">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d2cacbe7414512cb66e68/1613573292289/Terrone.jpg">

</a>

 

5.

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

  <div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602574d4fb90ff127dd10a0c/1613067477019/Farina+logo.jpg">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d27e95405054c4f8e19ae/1613572074124/Farina+image.jpg">

</a>

 

6.

<a href="">

  <div class="image-swap">

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

">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d3e93d39c1d1154cfa1e8/1613577878212/foxes+revenge.jpg">

</a>

 

7.

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

  <div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d283f43376a3c86b5367d/1613572159850/Bonne+Franquette+logo.jpg">

  <img src="

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

</a>

 

8.

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

  <div class="image-swap">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d2e3249ee2d06d9d14318/1613573683110/what+the+pitta.jpg">

  <img src="https://static1.squarespace.com/static/5f8ef7d38134bd56ce4700a9/t/602d2e3f4ee96901dec12fcb/1613573696131/what+the+pitta+2.jpg">

</a>

I followed a tutorial from this youtube link  

 

 

Link to post
  • 0
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

Link to post
  • 0

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

Link to post
  • 0
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?

image.thumb.png.7e90308d7fcc5c798bcf6466d8cd4e8c.png

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...