sll1017 0 Share Posted September 4, 2019 (edited) 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 Link to post
0 kiriako 0 Share Posted July 27, 2020 (edited) I have this same problem, did you ever figure it out? Edited July 27, 2020 by kiriako added more Link to post
0 tuanphan 9,585 Share Posted 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. Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 kiriako 0 Share Posted 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. Link to post
0 AmalieCharlesworth 1 Share Posted February 17 Hi, I'm still having the same issue if anyone can help! <center></center> doesnt work for me craveandco.com password: Amalie Link to post
0 AmalieCharlesworth 1 Share Posted 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: <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 AmalieCharlesworth 1 Share Posted February 18 I want it like this but its coming out like this! thank you so much in advance! Link to post
0 tuanphan 9,585 Share Posted February 19 Can you paste all codes in 8 Code Blocks here? I think some code has problem..Not sure, need to check code. Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 AmalieCharlesworth 1 Share Posted 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. <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 tuanphan 9,585 Share Posted 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 Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
0 AmalieCharlesworth 1 Share Posted February 22 Thank you! Works perfectly - you've made my day. tuanphan 1 Link to post
0 AmalieCharlesworth 1 Share Posted 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/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 tuanphan 9,585 Share Posted 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? Email me if you have need any help (free, of course :-D). Answer within 24 hours. How to: Setup password & share url Insert Custom CSS Open Page Header Upload Custom Font Find Block ID, Data Section ID Contact Squarespace Customer Care -- Yup! Link to post
Question
sll1017 0
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.
Edited by sll1017Initial Revision
Link to post
Top Posters For This Question
7
4
2
1
Popular Days
Feb 18
2
Feb 19
2
Jul 28
2
Feb 22
2
Top Posters For This Question
AmalieCharlesworth 7 posts
tuanphan 4 posts
kiriako 2 posts
sll1017 1 post
Popular Days
Feb 18 2021
2 posts
Feb 19 2021
2 posts
Jul 28 2020
2 posts
Feb 22 2021
2 posts
Popular Posts
AmalieCharlesworth
Thank you! Works perfectly - you've made my day.
Posted Images
13 answers to this question
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment