thesoulfulentrepreneur

@tuanphan ohhhh got it - thank you! that worked 🙂

Hello @tuanphan - I'm back, sometime later, with another dilemma related to these gold frames. This time, it's with the first testimonial block which you will find here. I am able to add the gold border, however, when I add the padding value - the result looks like this: This is the code without the padding value: #collection-6452ac9c917bdf36311b4be3 { .user-items-list-carousel__slide { flex-direction: row !important; } .user-items-list-carousel__media-container { width: 30% !important; margin-right: 50px; } .user-items-list-carousel__media { width: 100% !important; } } section[data-section-id="6452aca66bb4183fdbf6d4da"] .user-items-list-carousel__media-inner { overflow: visible !important; border: 1px solid #d1a556; } Do you have any idea what we might be missing? Thank you!

Thank you very much @tuanphan - I so greatly appreciate your support. I had to add !important to the border property but, it did the trick! 🙂

@aadmint2021 @Bmosello @taylorlaidlaw were any of you able to make it so that the counter starts when you scroll to that section instead of upon page load? @taylorlaidlaw I took a peek at the site you linked to and it looks like you did. If you are able to share the solution, I'd greatly appreciate it as I too am stuck with the same challenge 🙂

@tuanphan thank you! that does the trick. yes correct, that image.

@tuanphan thank you - that worked 🙂 The good news, mostly everything has been addressed. Just this remains: Circular Boders Is it possible to apply the frames with padding to images in testimonial slider blocks? For an example, please refer to the home page, under the 'our clients' block. I tried the following code: However, the issue arises with padding: since we use the Fluid editor to crop the images in Squarespace, so the original images are actually square. Is there a code solution for this or would it be better for us to upload the images as circles? Arch Borders On a somewhat similar note, is it possible to add gold frames to arch shaped images? For example, like the first image on this page. Thank you!

@tuanphan thank you 🙂 generally speaking, this solved almost all issues. I noticed one small thing. On the tools page: https://www.thesoulful.squarespace.com/tools, I applied the following code to remove the frames from the logos: Prior to doing so, I noticed that the Flodesk logo is cut off, along the bottom. I believe it's due to this code, from the solution above: because when I remove it, it's fine. Any thoughts on what to do here? Would it be easiest if we just manipulate the img file to add more white space around it?

@tuanphan ah ok, thank you - that makes sense in cases where I want to remove frames from all images in a section. With the top section images, I'm referring to the first image on this page, for example: https://thesoulful.squarespace.com/pre-made-brands-websites (there are a few other pages, like this, where the top image already has a custom frame that's more complex than just a border). Another example of a 'specific' image that I may want to remove a frame from is the scrolling desktop mockups that you see in the 'our identities' section. So in those situations, what's the best way to target a single image? Would it be like this (this is for the first image on the above referenced page)? #block-632883d2f88d78b13986a0e0 .fluid-image-container { border: none !important; }

@tuanphan Oh amazing, I adjusted the code for the first 3 and that did the trick. I'll work on the rest. THANK YOU!! 😄

@tuanphan thank you very much. i have added it. the good news, it seems to solve one part of the problem noted above. the other, about how to not target some images, still remains. here are a couple of examples: - the logos on this page: https://thesoulful.squarespace.com/tools. - the header images on pages like this: https://thesoulful.squarespace.com/about. is there any way to exclude images?

@tuanphan the images on this page, under the scrolling text. before, on hover, each image would reveal a picture of the client. now, it reveals a blank spot.

Site URL: https://www.thesoulful.squarespace.com Hello! Site URL: https://www.thesoulful.squarespace.com Pass: livesoulfully I am interested in using CSS to apply borders to the images on a website as efficiently as possible. I referenced the solutions in this thread, however, none seemed to do the trick: I got seemingly close with this: .sqs-block-image { border: 1px solid #d1a556 !important; padding: 10px !important; } However, two issues arise: 1. There are several images I do not wish to target. I assume that requires us to get more specific with targeting, like using the section ID, like this (this is for the home header): section[data-section-id="6328d3a483fd37bbf384a8f6"] .sqs-block-image { border: 1px solid #d1a556 !important; padding: 10px !important; } 2. In some cases, the padding doesn't apply evenly, for example, there may be more/less padding on the top/bottom of the image depending on the screen width. I have attached some examples for visual reference. I tried to solve this by switching the design setting of the image block from 'fit' to 'fill', but that introduces other proportion-related issues across screen sizes, which I'd like to avoid. Does anyone have any thoughts as to how to implement? Thanks in advance!

Hi @tuanphan - I recently updated this site to the fluid engine and, unfortunately the code no longer works. To access the page, the URL is: https://thesoulful.squarespace.com/. Pass: livesoulfully. I tried to update the section/block IDs but, no luck. Example: section[data-section-id="6329d15529842ea4bc52ac3a"] { .image-block a { background-size: cover; background-repeat: no-repeat; background-position: center center; transition: all 0.3s; } .image-block a { transition: all 0.3s; } .image-block:hover img { opacity: 0; }} div#block-6329d1552b4ffbc375724bdf:hover a { background-image: url(https://static1.squarespace.com/static/6226283dbb8c047be0806024/t/62c46b18d7ade732c875219b/1658252999585/COVER_portfolio_yaxkin.jpg); } Does it have something to do with the image block classes changing on the Fluid Engine? Thanks!

@tuanphan yes absolutely, https://www.thegroundedspirit.co/sessions

Site URL: https://www.thegroundedspirit.co/connect Hi! I'm woking on a Squarespace website and for whatever reason, the font weight on the contact page does not align with the rest of the website. It is heavier for h4, p2 and button styles than on the rest of the site and I cannot figure out why. All I can see is that on initial page load, it is fine, but then it changes. I have attached an example of the h4/p2 style on the sessions page versus the connect page. Does anyone have any ideas on why this may be happening? Thanks in advance!