sll1017 Posted September 4, 2019 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 comment
kiriako Posted July 27, 2020 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 comment
tuanphan Posted July 28, 2020 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.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
kiriako Posted July 28, 2020 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 comment
AmalieCharlesworth Posted February 17, 2021 Share Posted 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 Link to comment
AmalieCharlesworth Posted February 18, 2021 Share Posted 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: <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 comment
AmalieCharlesworth Posted February 18, 2021 Share Posted February 18, 2021 I want it like this but its coming out like this! thank you so much in advance! Link to comment
tuanphan Posted February 19, 2021 Share Posted 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AmalieCharlesworth Posted February 19, 2021 Share Posted 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. <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 comment
tuanphan Posted February 22, 2021 Share Posted 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 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AmalieCharlesworth Posted February 22, 2021 Share Posted February 22, 2021 Thank you! Works perfectly - you've made my day. tuanphan 1 Link to comment
AmalieCharlesworth Posted March 3, 2021 Share Posted 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/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 comment
tuanphan Posted March 6, 2021 Share Posted 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? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment