Jump to content

LukeDesign

Member
 View Profile  See their activity

  • Posts

    77

  • Joined

  • Last visited

 Content Type 

Everything posted by LukeDesign

  1. LukeDesign
    That's great, thank you!
  2. LukeDesign
    Bumping this back up. Still trying to add the correct CSS so these shapes don't move around when the desktop browser is resized. The goal is create a rectangle border around the text content. I am going for an overlap effect over the sections so the rectangle appears it is overlapping with the section underneath it. Multiple sections and background shapes were created for the illusion. To make it more clear on what is happening, I changed the color of some of the shapes: https://www.lucasano.com/invitations#experience The white vertical (left and right) shapes were created with a code block. The horizontal (top and bottom) shapes were added with Squarespace shape blocks. The top part of the rectangle is fine, it's the bottom that is shifting. Here is the code I currently have for this: Top horizontal shape */ #block-719cb3b717a5833a9a95{ height: 18px; } /* Bottom horizontal shape */ #block-9d9c45c1a8a3313b0308{ height: 18px; } /* Bottom Yellow vertical shapes (short) */ @vertLineShortThickness: 18px; #siteWrapper .code-block .sqs-block-content { position: unset; } .code-block .vert-line-short { height: 12px; &:before { content: ''; position: absolute !important; height: 210%; width: @vertLineShortThickness; background: #CE9D54 !important; /* Added !important */ left: 50%; transform: translateX(-50%); /* Make vertical for mobile */ @media screen and (max-width: 767px) { height: @vertLineShortThickness; width: 100%; } } }
  3. LukeDesign
    Yes, I am hoping to reduce the spacing between the logo and announcement bar. I've adjusted all I could in Squarespace's settings for the header height without the logo touching the bottom of the header.
  4. LukeDesign
    Yes, on those images in that section. Most likely will apply to future images. Thank you!
  5. LukeDesign
    @tuanphan, I'd like to add something like this as well. Here is a link to my page that has images: https://www.lucasano.com/invitations
  6. LukeDesign
    That worked. That's adjusting the pad for the text only. Is there a code to adjust the actual height of the bar itself?
  7. LukeDesign
    Hi @tuanphan, I am having similar issues with resizing the announcement bar. I've gone through the steps in this thread (and the other thread on this topic). I was able to change the font size and text placement without issue, but the decrease height of the pad is not working. I want to shorten the distance between the bar and the navigation header. Also not working is removing the underline from the URL link. Here is the code I am using: =================================== ANNOUNCEMENT BAR: CLIENT LOGIN =================================== **/ /* Customize Client Button */ .sqs-announcement-bar-text a { position: relative; text-decoration: none !important; margin: 5px!important; padding: 1px!important; line-height: 0em} /* Decrease font size */ .sqs-announcement-bar-text p { font-size: 10px !important;; } /* Remove X icon */ span.sqs-announcement-bar-close { visibility: hidden !important; display: none !important; } /* Bar Text Align */ .sqs-announcement-bar p { text-align: right; padding-right: 10px; } /* Decrease height */ .sqs-announcement-bar-text { padding-top: 0px; padding-bottom: 0px; } Here is my site: https://www.lucasano.com/inquire
  8. LukeDesign
    Thank you @Beyondspace and @ArminB. Both worked perfectly. I want to fix the shape so it doesn't move around when a user adjusts their browser window. I tried a couple codes but no luck. Below is the code I am using to adjust the height of the shape as well as the positioning within the row (note that I have a new block ID from my original post). Thanks again! #block-559b2a20ec544f218aa9{ height: 18px; } #block-559b2a20ec544f218aa9 {top: 10px !important; }
  9. LukeDesign
    https://www.lucasano.com/test The block ID is now: #block-yui_3_17_2_1_1714568705767_918
  10. LukeDesign
    I added a shape block (square). I stretched it the length of five columns. The width takes up one row in fluid engine. Is there way to adjust the height even further with CSS? I want to make it a tiny bit smaller than the row's height. The block ID for this shape is #block-b5d7e589e9a6b031b262. Thanks!
  11. LukeDesign
    This is great! Thank you so much!
  12. LukeDesign
    Your code worked in addition to me adjusting the footer to to fill screen. Thank you!
  13. LukeDesign
    Thank you! It worked, but once I adjusted the footer not to fill screen. 🙂
  14. LukeDesign
    I'm having similar issues with my footer on mobile. It is way too big. I tried using code I found on this thread and inserting what I believed to by my footer ID (id="yui_3_17_2_1_1713909727448_157") but it's not working. My site is https://www.lucasano.com/
  15. LukeDesign
    Bumping this back up. The code above is working on desktop. It's also working on the mobile preview in Squarespace but it's not actually working when I check on my iPhone. I've seen it work on other sites on my mobile so hoping I can adjust the code for it actually work on mobile. Below again is the code I am using: =================================== "ABOUT" FIXED BACKGROUND #2 =================================== */ section[data-section-id="6621a4dd4235ac53281adec8"] .section-background img { display:none; } section[data-section-id="6621a4dd4235ac53281adec8"] .section-background { background: url('https://static1.squarespace.com/static/660dabf2c74e425529726520/t/66224c02f2c52e7dcf15a37f/1713523717231/Sample+image+3.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center; } /*
  16. LukeDesign
    I have a main image gallery section that has four images within it. When a user clicks on an image, I want it to load another image gallery section underneath it. When they click on another image from the main gallery, it hides the previous section and loads a new one. Here's my website with all the gallery sections currently visible: https://www.lucasano.com/invitations Right now, there are anchor links driving the user to each of the sections. I've been researching all day and can't find a way hide/load when clicking an image. Note I am not a Circle member so I cannot add gallery blocks, so trying to do this with sections. Here is good example of what I am trying to do: https://rudneynovaes.com/services-weddings. (scroll down to "Signature Wedding Photography"). You'll see when you click an image, it scrolls down to reveal the album for that photo.
  17. LukeDesign
    Yes! Exactly!
  18. LukeDesign
    I created a vertical line in my footer using a code block. I want it to extend to the very top of the footer section so there is no spacing (almost like a vertical bleed). I also want the bottom to reach the horizontal line that I added underneath it - ultimately creating a _|_ The block ID for the vertical line is #block-yui_3_17_2_1_1713648183231_111276 and the horizontal line is #block-yui_3_17_2_1_1713648183231_123997. Here is my website: https://www.lucasano.com/
  19. LukeDesign
    Worked perfectly, thank you!
  20. LukeDesign
    I was able to find code that worked. I added this code for each section: body section[data-section-id="66219f22e4cf963ce6a57165"] .section-background img { display:none; } body section[data-section-id="66219f22e4cf963ce6a57165"] .section-background { background: url('https://static1.squarespace.com/static/660dabf2c74e425529726520/t/66243b33e50095191ec2b84f/1713650490415/Sample+image+2.jpeg'); background-attachment: fixed !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !important; }
  21. LukeDesign
    Thank you for the code. I added it but it turned the the image sections white: https://www.lucasano.com/about
  22. LukeDesign
    I have two image blocks with full bleed that are between three text blocks. The section ID's for the image blocks are: section[data-section-id="6621a4dd4235ac53281adec8"] section[data-section-id="66219f22e4cf963ce6a57165"] I purposely set the height of the image blocks to 20. I want these images fixed to the background so when you scroll down the page, it revels the entire image (within the 20 height) as the text blocks are scrolling up over them. I previously achieved this using the below code in my site's code footer injector, but it no longer works: */ .page-section.has-background { .section-background { background-size: cover; background-position: center center; @media (min-width: 1000px) { background-attachment: fixed; img { display: none !important; } } } } Is there a better code that I can use? I want this applied to the one page only. Here is the page: https://www.lucasano.com/about Thank you!
  23. LukeDesign
    Hi all - hoping someone can help me out with this 🙂: I tried changing the social media icon block from "left" to "right" in the code but it moves the social icons slightly more to the left.
  24. LukeDesign
    I added floating social media icons using a code that pulls the icons from the footer block. However, I want them to float on the right underneath a floating CTA "Contact Us" button I already have on the right. I want them to sit vertically under it. Here is my site: https://www.lucasano.com/ Here is the code I am using for both the floating CTA and the social icons: /* Floating Contact Button */ #floating-button { position: fixed; top: 45%; right: 0; transform: rotate(90deg) translateX(50%); transform-origin: 100% 0; z-index: 10000000; } /* Style Floating Contact Button */ #floating-button a { background: #262C35; color: #EADFD0; display: inline-block; font-size: 15px; text-transform: uppercase; font-family: oswald; font-weight: 400; letter-spacing: 0.1em; padding: 10px 25px; border-radius: 0px 0px 8px 8px; transition: ease 0.5s !important; } #floating-button a:hover { padding: 15px 30px; font-size: 17px; background: #555555; } /*Floating Contact Button Mobile */ @media screen and (max-width: 768px) { #floating-button { bottom: 0; top: auto; transform: none; left: 0; text-align: center !important; } #floating-button a { padding: 10px 0px; border-radius:10px 10px 0px 0px !important; width: 40% !important; } } /*Floating Social Icons */ #page {z-index:0;} footer { overflow: unset; z-index: 10000000; } footer .sqs-svg-icon--wrapper { display: block !important; } footer .socialaccountlinks-v2-block { pointer-events: none; position: fixed !important; top: 65% !important; left: 10px!important; z-index: 10000000; } footer .socialaccountlinks-v2-block .sqs-svg-icon--list { pointer-events: none; display: flex; flex-direction: column; } footer .socialaccountlinks-v2-block a { margin: 0 0 15px !important; /*Change this number to adjust the spacing of the social icons*/ display: inline-block; pointer-events: auto; }
  25. LukeDesign
    Hello all, I am trying to achieve the same thing as the original post (relocate header navigation below my header banner). I used the original code that was provided in the thread, but it is not working. I made sure to replace with beaverhero with my image URL. Here is my website on the page I am trying to do this: https://www.lucasano.com/home And here is the code I inserted in the CSS under Home / Website Tools / Custom CSS: /* Add a banner */ body.homepage div#siteWrapper:before { content: ""; background-image: url(https://static1.squarespace.com/static/660dabf2c74e425529726520/t/661a73f4b369d36c1bd3199b/1713009653619/TEST_home-page.jpg); background-size: cover; background-repeat: no-repeat; display: block; width: 100%; height: 500px; } /* Add sticky header */ header#header { position: sticky !important; top: 0; } Thanks for your help!
×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Upcoming Webinars →

Hire a Designer

Stand out online with the help of an experienced designer or developer.

Get Matched →

Support

Community

Developers

Resources