Naomi-lifelab

Hello @Beyondspace Thank you for getting back to me so promptly. I do apologize as I was on leave for quite some time so I was not able to apply the code at an earlier date. I tried now, but the code for the EN version does not apply, this code #block-yui_3_17_2_1_1663235763574_9695 .sqs-block-content.sqs-intrinsic{ padding-bottom: 42.0455% !important; } It just shows the review a bit smaller So what I did is I kept your code for the DE version and kept the original version on the EN code which was the; { #block-yui_3_17_2_1_1663235763574_9695 .sqs-gallery-design-strip { overflow: visible; height: 200%; } Would you be able to help me fix the EN code with block #block-yui_3_17_2_1_1663235763574_9695? Thank you in advance!

https://lifelab.world/de/events https://lifelab.world/en/events Both are on a Video background

My apologies, Here are the URLs: https://lifelab.world/de/spaces As for DE page please scroll down to the "Was unsere Kunden sagen" part and https://lifelab.world/en/spaces As for the EN page please scroll down to the "What our clients say"

Hello Squarespace experts! I humbly asked for help changing the font on the image overlay for this image block with the design of poster. The font should be Sofia-pro similar to the other small fonts and paragraphs, that are set on our website. I have no code for this yet as I am having a hard time detecting the element for the font. Please see the image below. Thank you in advance for your help on this.

Hello Squarespace experts! I am in need of your assistance regarding this DIY testimonial gallery slider I made. It looks fine on desktop and tab view, but on mobile, it needs some fixing. What I did is, I designed a review/testimonial template on Canva and I posted them on a gallery block. Initially, I wanted to make the photo bigger on mobile so it can be viewable. This is my current code below: //Mobile review gallery spaces EN// @media screen and (max-width: 767px) { #block-yui_3_17_2_1_1663235763574_9695 .sqs-gallery-design-strip { overflow: visible; height: 200%; } //Mobile review gallery spaces DE// #block-yui_3_17_2_1_1668080702092_9511 { overflow: visible; height: 200%; } } I hope to make the photo bigger, so it can be readable. Thank you in advance in your advice and help!

It worked! Thank you so much @Ziggy! Such a life saver! 🙏

Hello experts! I am humbly seeking for you expertise to fix this error. Originally I made a landing page, and I wanted the gallery arrow sliders to be bigger. So I added this code specifically for this landing page link: https://lifelab.world/workshop-location-buchen /* Landing page spaces photo preview summary arrows */ div#block-yui_3_17_2_1_1648549152222_22108 { .sqs-gallery-controls .next { position: absolute !important; top: 35% !important; transform: translateY(100%); font-size: 30px !important; right: -100px !important; overflow: visible; } .sqs-gallery-controls .previous { position: absolute !important; top: 35% !important; transform: translateY(100%); font-size: 30px !important; left: -100px !important; overflow: visible; } .summary-carousel-pager .sqs-gallery-controls { overflow: visible; } } .sqs-gallery-controls .previous { right: unset !important; left: 20px !important; color: white; background-color: rgba(255, 255, 255,.5) } .sqs-gallery-controls .next { right: 10px !important; color: #fff; background-color: rgba(255, 255, 255,.5) } .sqs-gallery-controls .next:before { font-size: 100px; color: #fff; } .sqs-gallery-controls .previous:before { font-size: 100px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-size: 50px; width: 50px; height: 5px; line-height: 5px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02C"; text-align: center; display: inline-block; vertical-align: middle; color: #fff!important; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-size: 50px; width: 50px; height: 5px; line-height: 5px; color: #fff; } .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02D"; text-align: center; display: inline-block; vertical-align: middle; } /* Landing page setiing summary arrows */ div#block-yui_3_17_2_1_1649142326010_3915 { .sqs-gallery-controls .next { position: absolute !important; top: 45%!important; transform: translateY(-50%); font-size: 30px !important; right: 100px !important; color: white; } .sqs-gallery-controls .previous { position: absolute !important; top: 45%!important; transform: translateY(-50%); font-size: 30px !important; right: 100px !important; color: white; } //left arrow// .sqs-gallery-design-carousel .sqs-gallery-controls .previous:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02C"; text-align: center; display: inline-block; vertical-align: middle; color: #fff; } //right arrow// .sqs-gallery-design-carousel .sqs-gallery-controls .next:before { font-family: 'squarespace-ui-font'; font-style: normal; speak: none; font-weight: bold; -webkit-font-smoothing: antialiased; content: "\E02D"; text-align: center; display: inline-block; vertical-align: middle; } .sqs-gallery-controls .previous { right: unset !important; left: 20px !important; color:#fff; } .sqs-gallery-controls .next { right: 50px !important; color: #fff; } .sqs-gallery-controls .next:before { font-size: 80px; color:#fff; } .sqs-gallery-controls .previous:before { font-size: 80px; } } The problem I am currently facing it is being applied all throughout the website. This is what it looks like on a normal page (not landing page) What can I do to have the arrows sizing codes be applied only on the landing page? I am not an expert and I am just learning along the way, I do appreciate anyone's help in advance for this.

Hello @paul2009 Thank you for being so kind in looking into this. 🙏 For the meantime, I removed the code for the month switch (which came from a previous thread below). I tried placing the codes again and it still does not work. I tried using incognito and refreshing the page multiple times. The block from #block-2cd3c3f72a1a11967dd0 and the placeholder search bar translation does not work still. Have I ruined the code injection? Some still work though. 😞 Thank you so much!

Hello Paul, Thank you so much for replying. I really appreciate it. 🙏 I just wanted clarify as I am not that much of an expert. I have repeated this code 5 times with different block-ids in the footer - code injection section. So what caused the problem is me adding the code multiple time, right? Can I just add all the block IDs in one code? If so, may I please ask on how to do it? Like for example: <script> if (document.querySelector("#block-2cd3c3f72a1a11967dd0, #block-0d55eda3023d78a9c134, #block-5d0d9e64cf7cce9ec333, #block-7e4a384bb11453f45f5e, #block-b5f0f6b171bc88ba369e")) Would this be correct? The blocks at the end are the block codes that worked before. Also what about for this code? This is just a single code that I just recently added, no other one like it in the code injection section. <script> $(document).ready(function() { $('body.body-de .sqs-search-page input').attr('placeholder','Zum Suchen tippen'); }); </script> Thank you so much for your help

Site URL: https://lifelab.world/search?q= Hi everyone, May I please ask for help? There seems to be a problem with the code injection lately. I have tried applying all of these on the code injection but none of them seem to work. These are the items I want to be changed which is Type to search = Zum Suchen tippen Link: https://lifelab.world/search?q= <script> $(document).ready(function() { $('body.body-de .sqs-search-page input').attr('placeholder','Zum Suchen tippen'); }); </script> The other one is a form that I am trying to translate as I press the button Bewirb dich hier Link: https://lifelab.world/de/spaces Here is the code: <script> if (document.querySelector("#block-2cd3c3f72a1a11967dd0")) { document.querySelector('.field.first-name .caption .caption-text').innerText = 'Vorname'; document.querySelector('.field.last-name .caption .caption-text').innerText = 'Nachname'; document.querySelector('.field.address1 .caption .caption-text').innerText = 'Company name'; document.querySelector('.field.address2 .caption .caption-text').innerText = 'Anschrift'; document.querySelector('.field.city .caption .caption-text').innerText = 'Stadt'; document.querySelector('.field.state-province .caption .caption-text').innerText = 'Bundeslandz'; document.querySelector('.field.zip .caption .caption-text').innerText = 'Postleitzahl'; document.querySelector('.field.country .caption .caption-text').innerText = 'Land'; } </script> I placed them all in footer. I have asked on the original threads that I made but no one has replied yet. 😞 Thank you in advance

Thank you @tuanphan however it still does not work. I am unsure what I did wrong. This is the code I placed <script> $(document).ready(function() { $('body.body-de .sqs-search-page input').attr('placeholder','Zum Suchen tippen'); }); </script>

Site URL: https://lifelab.world/de/spaces Hello Squarespace team, May I please ask for help in checking the code below? I am trying to translate a form field using this code, which I have been using since last year which was also provided here on the forum as well. I am unsure why it is not working on this specific button. (lower part of the page) Everything seems to be working on other types of German forms that I edited with the exact details below. I usually duplicate a page then just change some texts, but the forms are usually the same, the only differences are the block IDs for the codes. I added this on the Settings > Advanced > Code Injection > Footer <script> if (document.querySelector("#block-2cd3c3f72a1a11967dd0")) { document.querySelector('.field.first-name .caption .caption-text').innerText = 'Vorname'; document.querySelector('.field.last-name .caption .caption-text').innerText = 'Nachname'; document.querySelector('.field.address1 .caption .caption-text').innerText = 'Company name'; document.querySelector('.field.address2 .caption .caption-text').innerText = 'Anschrift'; document.querySelector('.field.city .caption .caption-text').innerText = 'Stadt'; document.querySelector('.field.state-province .caption .caption-text').innerText = 'Bundeslandz'; document.querySelector('.field.zip .caption .caption-text').innerText = 'Postleitzahl'; document.querySelector('.field.country .caption .caption-text').innerText = 'Land'; } </script> Am I doing something wrong? Thank you in advance!

Site URL: https://lifelab.world/search?q= Hello Squarespace experts, I need some help please on how to translate the "type to search" on the search page on a specific language page which is the DE - German page. I also like to keep the "type to search on the EN page. 🙏 I have read this thread but I know that this applies to one translated page only. 😞 Please see the screenshot below Thank you in advance for your assistance! Sincerely Naomi

I have discovered the code { .summary-item { height: 70%; width:100%!important; } } I hope this helps others

Site URL: https://lifelab.world/workshop-location-buchen Hello Squarespace experts, I am need of your help. Is there any way to increase the photo view of the gallery on mobile? Or just reduce the showed photos per preview to 2 photos or 3 photos? I have 2 galleries on the URL. Thank you so much in advance!

Hi @paul2009, thank you for getting back to me. 🙂 I have indeed contacted CSS support, and was advised to remove the CSS codes and slowly add them portion by portion. The codes started working again as I followed the instructions of the agent. Thank you for being helpful with all of us. 🙏

Am I the only one who is experiencing half-fixed bug issues? Some CSS codes are working and some are not working. I have reported this again with the customer care support. 😩

It is still not working for me too. 😥 It seems like it is fixed for a lot of people now. I hope this gets resolved for everyone soon.

Site URL: https://lifelab.world/workshop-location-buchen Hello Squarespace Experts! I have recently encountered this cool code here by @tuanphan. It works perfectly but the only issue is the loop takes around 20-30seconds before it goes back to the start. Is there any fix ton increase the speed of the loop? In addition, can I also add additional pages on the var container = Y.one("#spaces-photo-preview-2") by adding a comma? This is the code: I just need a loop speed fix <!-- Summary Block Autoplay --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script> <script> $(document).ready(function() { try { var container = Y.one("#spaces-photo-preview-2"); /*change this to the slug of your page*/ var gallery = Y.Squarespace.GalleryManager.getGalleryByContainer(container); gallery.setAttrs({ "autoplay":true, "autoplayOptions": { "timeout":3000, /*make this higher to decrease speed, lower to increase it*/ "randomize": true } }); } catch (e) { console.error("Could not configure Gallery autoplay.", e); } }); </script> Thank you so much in advance!

I just figured out the code: #url-name { .form-block .lightbox-handle { width: 30%; font-size: 20px; } } This is mine: #inquiry-section { .form-block .lightbox-handle { width: 30%; font-size: 20px; } } I hope this helps others

Site URL: https://lifelab.world/workshop-location-buchen Hello Squarespace experts! I am once again in need of assistance with some code as I am trying to increase the size of the form button. The section is on the lower part of the page. These are my codes, but I can't seem to make them work: #block-7e4a384bb11453f45f5e { button.lightbox-handle .sqs-system-button .sqs-editable-button .sqs-button-element--primary { width: 50%; font-size: 20px; } } I also tried this #block-7e4a384bb11453f45f5e { body:not(.button-style-default).button-corner-style-pill .sqs-editable-button { width: 50%; font-size: 20px; } } Both doesn't seem to work. 😞 Thank you kindly in advance! 🙂

Thank you @tuanphanyou have always been helpful! 🙏

Site URL: https://lifelab.world/landing-page-sample-1 Hello Squarespace experts, May I please ask for help on this? I am currently working on making the summary block arrows move from upper left to the middle on each side. (Please see attached photo) I have been trying using codes from the forum and trying in Inspect but I cannot seem to make them work in CSS ins Squarespace. I have this code but whenever I try to tweak it the arrows disappear. I think it is because of the full width page. Please help me fill all these win which I can see the arrows on each sides #settings-layout-summary .summary-carousel-pager .previous { position: absolute !important; left: !important; right: inherit !important; top: !important; } #settings-layout-summary .summary-carousel-pager .next { position: absolute !important; left: inherit !important; right: !important; top: !important; } #settings-layout-summary .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { display:inline-block !important; float: right; position: relative; top: auto; left: ; right: ; bottom: auto; margin: 0 0 0; padding: 0; background-color: transparent; color: #fff !important; font-size: px; line-height: px; text-align: center; cursor: pointer; } Thank you in advance!

Many thanks @tuanphan I am grateful for your help as always. 🙏

Site URL: https://lifelab.world/landing-page-sample-1 Hello Squarespace experts! I am again in need of help regarding making the logo reappear on the mobile view. Here is an example of the desktop view But on mobile view the logo disappears. 😞 I thank you in advance for this help. 🙏