Lexa

Hi everyone, first of all, thank you in advance to anyone that offers a helping hand. I am trying to implement this CodePen code into my website, I have added the whole code into a code block inside only one site on my webpage; however, the whole CSS style of that page is affected. I believe the problem is one of the bootstraps I am adding. However, without it, the whole code does not work. The code pen link is (as I hope it would look like on my Squarespace website): https://codepen.io/SuperHumanosPodcast/pen/GRwRwXE My webpage (how the resulting code looks), where I am implementing the specific code as a single code block, is: http://ariix.com.mx/test Finally, the whole code is: (I am almost sure the problem is "bootstrap@5.0.2......") <link rel="stylesheet" href="https://fonts.googleapis.com" /> <link rel="stylesheet" href="https://fonts.gstatic.com" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Raleway:wght@200;400;500;700&amp;display=swap" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rancho&amp;effect=anaglyph|3d-float" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" /> <!-- insert any HTML code from the pen below this line --> <div class="section"> <div class="container p-4 p-md-5"> <div class="row banner-news"> <div class="col-lg-12 px-5"> <h4 class="pb-3">Comprar por Categoría</h4> <div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 g-4"> <!-- Card 1 --> <div class="col"> <div class="card"> <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/f3af1e01-6cf3-42b0-a453-9e66635584fc/Slenderiiz-PartnerCo-Ariix-Programa-Perdida-Peso.png?format=1500w" class="img-fluid"> <div class="card-body p-0"> <div class="accordion accordion-flush" id="accordionCard1"> <div class="accordion-item"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card1" aria-expanded="false" aria-controls="education-card1"> <p class="card-title">Slenderiiz</p> </button> <div id="education-card1" class="accordion-collapse collapse" data-bs-parent="#accordionCard1"> <div class="accordion-body"> <!-- Product Image and Name --> <a href="https://www.ariix.com.mx/gotas-premeal-niite"> <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/241ec3bc-3d14-47c7-bc5d-d0bff0d39d3b/Gotas-Ariix-Adelagazar-Veganas-Slenderiiz-Partner-Co-Night-Day-Gotas-Drops.png?format=500w" class="img-fluid"> </a> <p class="card-text">Gotas Pre-Meal & Niite (México) <FONT COLOR= #FF0000><i><b>MÁS VENDIDO</FONT COLOR= #FF0000></b></i></p> <a href="https://www.ariix.com.mx/gotas-day-night"> <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/5063d11b-c58f-4f60-a1a4-7c68d8d8cd3a/Gotas-Espan%CC%83a-Night-Day-Slenderiiz-Ariix-NewAge-Partner-Co.png?format=750w" class="img-fluid"> </a> <p class="card-text">Gotas Day & Night (Europa) <FONT COLOR= #FF0000><i><b>MÁS VENDIDO</FONT COLOR= #FF0000></b></i></p> <a href="https://www.ariix.com.mx/gotas-slenderiix-xceler8"> <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/f943791f-8fa0-428d-9b90-7110563e279b/Slenderiiz+Drops+Slenderiix+%26+Xceler8+Ariix+NewAge+Partner+Co.png?format=1500w" class="img-fluid"> </a> <p class="card-text">Gotas Slenderiix & Xceler8 (Estados Unidos) <FONT COLOR= #FF0000><i><b>MÁS VENDIDO</FONT COLOR= #FF0000></b></i></p> <a href="https://www.ariix.com.mx/slenderiiz"> <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/241ec3bc-3d14-47c7-bc5d-d0bff0d39d3b/Gotas-Ariix-Adelagazar-Veganas-Slenderiiz-Partner-Co-Night-Day-Gotas-Drops.png?format=500w" class="img-fluid"> </a> <p class="card-text">PowerBoost (Cocoa PB) <FONT COLOR= #FF0000><i><b>MÁS VENDIDO</FONT COLOR= #FF0000></b></i></p> <a href="https://www.ariix.com.mx/slenderiiz"> <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/465b3807-261b-4a31-997b-7abe1d222cfd/Untitled+%281500+%C3%97+1000+px%29+%281%29.png?format=500w" class="img-fluid"> </a> <p class="card-text">PureNourish</p> <a href="https://www.ariix.com.mx/slenderiiz"> <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/241ec3bc-3d14-47c7-bc5d-d0bff0d39d3b/Gotas-Ariix-Adelagazar-Veganas-Slenderiiz-Partner-Co-Night-Day-Gotas-Drops.png?format=500w" class="img-fluid"> </a> <p class="card-text">Giving Greens</p> <a href="https://www.ariix.com.mx/slenderiiz"> <img src="https://images.squarespace-cdn.com/content/v1/5efe0307ffc2f00ba07e009e/241ec3bc-3d14-47c7-bc5d-d0bff0d39d3b/Gotas-Ariix-Adelagazar-Veganas-Slenderiiz-Partner-Co-Night-Day-Gotas-Drops.png?format=500w" class="img-fluid"> </a> <p class="card-text">Beauty Boost </p> </div> </div> </div> </div> </div> </div> </div> <!-- Card 2 --> <div class="col"> <div class="card"> <img src="https://d1g9yur4m4naub.cloudfront.net/image-handler/picture/2021/2/shutterstock_1188127132.jpg" class="img-fluid"> <div class="card-body p-0"> <div class="accordion accordion-flush" id="accordionCard2"> <div class="accordion-item"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card2" aria-expanded="false" aria-controls="education-card2"> <p class="card-title">Nutrifii</p> </button> <div id="education-card2" class="accordion-collapse collapse" data-bs-parent="#accordionCard2"> <div class="accordion-body"> <!-- Product Image and Name --> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> </div> </div> </div> </div> </div> </div> </div> <!-- Card 3 --> <div class="col"> <div class="card"> <img src="https://cdn.technologynetworks.com/tn/images/body/humancellnuclei1512470985301.jpg" class="img-fluid"> <div class="card-body p-0"> <div class="accordion accordion-flush" id="accordionCard3"> <div class="accordion-item"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card3" aria-expanded="false" aria-controls="education-card3"> <p class="card-title">Cancer</p> </button> <div id="education-card3" class="accordion-collapse collapse" data-bs-parent="#accordionCard3"> <div class="accordion-body"> <!-- Product Image and Name --> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> </div> </div> </div> </div> </div> </div> </div> <!-- Card 4 --> <div class="col"> <div class="card"> <img src="https://chanzuckerberg.com/wp-content/uploads/2022/11/22_1128-Lab-Made-Stem-Cells-Transforming-Research-Hero.jpg" class="img-fluid"> <div class="card-body p-0"> <div class="accordion accordion-flush" id="accordionCard4"> <div class="accordion-item"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card4" aria-expanded="false" aria-controls="education-card4"> <p class="card-title">Immune System</p> </button> <div id="education-card4" class="accordion-collapse collapse" data-bs-parent="#accordionCard4"> <div class="accordion-body"> <!-- Product Image and Name --> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> </div> </div> </div> </div> </div> </div> </div> <!-- Card 5 --> <div class="col"> <div class="card"> <img src="YOUR_IMAGE_URL" class="img-fluid"> <div class="card-body p-0"> <div class="accordion accordion-flush" id="accordionCard5"> <div class="accordion-item"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#education-card5" aria-expanded="false" aria-controls="education-card5"> <p class="card-title">YOUR_TITLE</p> </button> <div id="education-card5" class="accordion-collapse collapse" data-bs-parent="#accordionCard5"> <div class="accordion-body"> <!-- Product Image and Name --> <img src="YOUR_PRODUCT_IMAGE_URL" class="img-fluid"> <p class="card-text">YOUR_PRODUCT_NAME</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!--/.col-lg-12--> </div> <!--/.row --> </div> <!--/.container--> </div> <!--/.section--> <!-- insert any CSS Code between these style tags --> <style> h4, h4 a { color: #202025; font-weight: bold; text-align: left; font-size: 2.027rem; } .banner-news .card { border: 0; border-radius: 1rem; -webkit-box-shadow: 0 20px 40px 0 rgb(190 190 205 / 50%); box-shadow: 0 20px 40px 0 rgb(190 190 205 / 50%); height: auto; padding-top: 0; -webkit-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .banner-news .card .card-body .card-title { color: #0078bf; display: block; font-size: 1.266rem; font-weight: bold; margin: 0; padding: 0; text-decoration: none; } .banner-news .card .card-body .card-title:hover { cursor: pointer; } .banner-news .card .card-body .card-text { color: #202025 !important; font-size: 1.125rem; } .banner-news .card:hover { -webkit-box-shadow: 0 20px 40px 0 rgb(190 190 205 / 50%); box-shadow: 0 20px 40px 0 rgb(190 190 205 / 50%); -webkit-transform: scale(1.02); -ms-transform: scale(1.02); transform: scale(1.02); } .banner-news .card img { border-top-left-radius: 1rem; border-top-right-radius: 1rem; max-height: 45vh; min-height: 35vh; object-fit: cover; width: 100%; } .banner-news .card .card-body .card-title:hover { cursor: default; } .banner-news .card .card-body .card-title { color: #202025; } .accordion-header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #f1f5f8; display: flex; padding: 1rem 1.25rem; position: relative; -webkit-transition: color .15s ease-in-out; -o-transition: color .15s ease-in-out; transition: color .15s ease-in-out; width: 100%; } .accordion-header::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 1.25rem; content: ''; -ms-flex-negative: 0; flex-shrink: 0; height: 1.25rem; margin-left: auto; -webkit-transition: transform .2s ease-in-out; -o-transition: transform .2s ease-in-out; transition: transform .2s ease-in-out; width: 1.25rem; } .accordion-header h4 { margin-bottom: 0; width: 100%; } .accordion-header a { display: block; } .accordion-item { border: 0; margin-bottom: .8rem; } .accordion-button { font-size: 1.125rem; font-weight: bold; padding-bottom: .5rem; padding-top: .5rem; } .accordion-button:not(.collapsed) { color: #202025; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } .accordion-button:focus { border-color: transparent; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } </style> <!-- insert any JS dependencies here --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <!-- insert any JS Code from teh code pen inside these script tags --> <script> </script> A quick thank you to user @iamdavehart the template on how to add codepen code to Squarespace!

@tuanphan Once again, after 2 years, asking kindly for your help if you have time! Thank you so so much!

Hi everyone, I am working on creating a code that displays different texts (prices) based on the users' location. I found this code on the Internet it works perfectly if I use it alone. However, I have different products on the same page and need to replicate the same code for different products. If I use both codes on separate pages they work, but not on the same page. The code is as follows: (as you can see for one product I try to use the class "update_price" and for another "update_price2" my logic is that when the code is running the "divs" with each desired class will be updated. <script type="application/javascript"> function get_url_param() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } function geoip(json){ // Get the country URL parameter country_param = get_url_param()['country']; // If the country parameter is not empty, then use this value if(country_param != null) { country_code = country_param; } else { // Else use the GEO IP location country_code = json.country_code; } // Set dynamic values in an object var price_obj = { prices: { ES: '€148.92 EUR', US: '$150.00 USD', MX: '$1,999 MXN', } }, get_price = price_obj[ 'prices' ][ country_code ]; // Check if we have a price for the visitor's country, if not we'll set a default of $12.99 if(get_price == null) { display_price ='$1,999 MXN'; } else { // Else the price does exist is the array display_price = get_price; } // Get the element we want to update by class var price_elem = document.getElementsByClassName('update_price'); // Update each element on the page that uses this class for (var i = 0; i < price_elem.length; i++) { var str = price_elem[i].innerHTML; price_elem[i].innerHTML = display_price; } } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script> <div class="update_price"> </div> <style> .update_price { font-size: 1.85em; font-weight: bold; } </style> *ANOTHER PRODUCT* <script type="application/javascript"> function get_url_param() { var vars = {}; var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) { vars[key] = value; }); return vars; } function geoip(json){ // Get the country URL parameter country_param = get_url_param()['country']; // If the country parameter is not empty, then use this value if(country_param != null) { country_code = country_param; } else { // Else use the GEO IP location country_code = json.country_code; } // Set dynamic values in an object var price_obj = { prices: { ES: '175.20 EUR', US: '$176.00 USD', MX: '$2,359 MXN', } }, get_price = price_obj[ 'prices' ][ country_code ]; // Check if we have a price for the visitor's country, if not we'll set a default of $12.99 if(get_price == null) { display_price = '$2,359 MXN'; } else { // Else the price does exist is the array display_price = get_price; } // Get the element we want to update by class var price_elem = document.getElementsByClassName('update_price2); // Update each element on the page that uses this class for (var i = 0; i < price_elem.length; i++) { var str = price_elem[i].innerHTML; price_elem[i].innerHTML = display_price; } } </script> <script async src="https://get.geojs.io/v1/ip/geo.js"></script> <div class="update_price2"> </div> <style> .update_price2 { font-size: 1.85em; font-weight: bold; text-decoration: line-through; color: red; } </style> I have no experience with coding but have always found solutions by tweaking things around but I cannot seem to make this one work. Thank you in advance to anyone that helps 🙂

Hello @tuanphan sorry to bother you again, hope you can help me out again, I would greatly appreciate it! I have several icons on the webpage: https://ariix.com.mx/nutrifii which didn't work with the code, all others did work. For example the blue and green icons (attachment) don't show up as two columns on mobile. I am targeting the spacer block ID which is on top of the icons for the code, is that the problem? And the last question, there is another page with icons, https://ariix.com.mx/slenderiiz on which I also applied the code above but the icons still stack on mobile, I think I am targeting the wrong Block ID. Any tips or help is appreciated!

Worked perfectly. Thank you!!!

This would be great @tuanphan I would greatly appreciate it! I just want to mobile to look more user friendly, and 2 images per row (and then the other code block below) is perfect. 🙂

Site URL: http://ariix.com.mx/nutrifii Hey guys, I am working on a site that has some icons (as code blocks) and I am having trouble when the display is switched to mobile. In desktop the code blocks appear on the same row, however as we know in mobile everything is stacked. I have tried several CSS codes without avail. I can't seem to find a way to make the images appear on the same row when on mobile. On the attachments you will be able to see how the display is on desktop and how it stacks them and messes up the row on mobile. Thanks in advance!