Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search


Circle Member
  • Posts

  • Joined

  • Last visited

Everything posted by stellaehabib

  1. Site URL: https://www.thesoulfulentrepreneur.ca/clients Hello, I know that it is possible to change an image on hover using custom code blocks; however, is it possible to do so for blog cover images? The page I'm interested in doing this for is here. Ideally, I'd love to change each image to an image of the client upon hover. If not, I realize that a workaround would be to set up a new page with custom code where each image is added as a code block and links to the corresponding blog page. However, I thought I'd investigate whether the above approach is possible before doing so. Thanks in advance for your help!
  2. @tuanphan my apologies, in the meantime I answered my own question. thanks for your support!
  3. @tuanphan ah ok. thank you - that does work. so to clarify, it is not possible to change to colour on hover for individual images? like if I wanted to apply this to the resources page, for example?
  4. @tuanphan I'm trying to apply the same for a background image, but for some weird reason - while the initial grayscale code works, the hover state does not work. I'm testing on the header image. URL: https://www.leadwithbliss.squarespace.com Pass: leadwithbliss Code: .section-background img { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .section-background img:hover { filter: grayscale(0); -webkit-filter: grayscale(0); } But when I use the inspector and force the hover state, it works (see attachment). Any ideas as to why this might be?
  5. @tuanphan my apologies for the delayed response. i tried this but, unfortunately it did not work. Please refer to the screenshot. I now have 3 columns in the design, rather than 2, so I'm not sure if that's influencing the result?
  6. @tuanphan yes correct 🙂 it already appears that way on desktop, by default.
  7. @tuanphan Yes so I had found this thread in which you provided a suggestion on how to achieve this look in the brine template on 7.0, I thought I would see if I could get it to work in 7.1
  8. @tuanphan yes, this occurs on the home (www.leadwithbliss.com) and coaching (www.leadwithbliss.com/coaching) pages (pass: leadwithbliss). You'll notice that the left/right vertical lines vary in position depending upon the section that they are in. Thanks 🙂
  9. Site URL: https://www.leadwithbliss.com Hello! I have added custom code to www.leadwithbliss.com (password: leadwithbliss), implemented in Squarespace 7.1, to overlay the mobile nav menu on the header banner image. I managed to achieve that with the following code: .header-display-mobile { position: absolute; z-index: 999; top: 0; left: 0; width: 100%; } However, I run into an issue upon scroll: the nav folder does not appear upon click of the hamburger menu (see attached screen shot - notice the 'x', indicating that the folder is open). I suspect I am missing something fairly obvious with respect to bringing that element forward using position/z-index values but I can't quite seem to figure it out. Does anyone have any suggestions on how to fix this? Thanks in advance for your help!
  10. @tuanphan back with a follow-up question. do you have any idea why the vertical line in the 'my approach' section of the 'coaching' page does not appear in the same position as the 'conscious coaching' section on the home page? I suspect it's because the structure of the elements in the block is different than all of the other sections I have added the vertical line to so where I added the code in the block is different. However, I figured I'd ask in case you have any comments. Is the only way to make the position match to add custom code for this section? The URL and pass have remained the same. The code I have added for this is: Code Block: <div class="vl-right"></div> CSS: .vl-right { border-right: 1px solid #000000; height: 800px; position: absolute; left: 110%; } [data-section-id="60d0e85e724ba127a9a08e7b"] .content-wrapper { padding-top: 0 !important; } Thanks in advance!
  11. @tuanphan ohhhh wow it was that simple. got it! thank you so much.
  12. Site URL: https://www.leadwithbliss.squarespace.com Hi! I'm working on the following website: www.leadwithbliss.squarespace.com Password: leadwithbliss I'm trying to add a full-height, vertical line within a section to achieve this look: So far, I have added the following code: Code Block: <div class="vl"></div> CSS: .vl { border-right: 1px solid #000000; height: 800px; position: absolute; left: 110%; } However, I'm stuck and cannot get the line to go to the top of the section: Any suggestions? Thanks in advance for your help!
  13. Site URL: https://www.olesyaoligradska.com/the-sisterhood-circle Hi! I'm adjusting a client's website design. Attached, you will see the design of the section on desktop (attachment: Desktop view). I'm trying to add custom code to resize the checkmark icon on mobile. I tried this: @media only screen and (max-width: 640px) { #sisterhood-outcomes img { height: 50% !important; width: 50% !important; } } But, the result is shown in the second image (attachment: mobile view). Side note: I realize the percentages will likely need to be smaller. Does anyone have any suggestions on how to customize the code on mobile to keep the check marks inline with each point? Thanks in advance!
  14. Hello! I'm working on a website design using the Mercer template. I have updated the 'Read More' links of blog summary blocks to buttons. I would love to remove the arrow which follows read more. Here's the website (password: realestate). Please refer to the 'Featured Listings' section (as pictured below). Does anyone know how to do this? Many thanks!
  15. @tuanphansure you can access it here (password: oakville).
  16. Hello! I am currently using the Mentor template in the Brine family. I would like to stack a logo directly above the nav menu, on the header banner image. Right now, you can see that the logo is centered above the nav, but it has a different background colour because it's against the background, not on top of the banner image. That is because the logo's position is "top center" while the nav's position is "bottom center". When I change the logo to "bottom center" and keep the nav at "bottom center" it looks like this, which isn't what I'm aiming for: Does anyone have any advice on how to achieve the desired result? Thank you.
  • Create New...