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

Search the Community

Showing results for tags 'floating'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

Found 15 results

  1. Im using the Forte template in 7.0. Im wondering if i could possible put a full width image under a carousel gallery? Almost like the carousel gallery is floating above the background image? In my template you cant have banner images at the top on separate pages. The banner images are used on the rotating index page so im trying to think of a way round it? Could it be done with custom CSS? I know i could have a site wide banner style image but i dont want the same background image on every page. Ive attached a rough mock up of what i mean. The lighter grey panel would be the background image and the darker grey box is the carousel gallery. Its driving me crazy ;) Cheers.
  2. Site URL: http://www.eweindia.com/ Hi, I want to add background music to my website which will auto Play when customer visits the website and I want to give a small floating icon (button) on top right header for pause/play. Basically this icon will work as play/pause button. I want to make it similar to below reference. Reference: http://motwane.co/#about Please guide me how can I do this ? This is very urgent for this our website is not launched. Please help as soon as possible. Thank you.
  3. Hey there, I have a bit of a tricky problem! For a client site, I'll be needing to create a full-width newsletter signup bar with a background color at the bottom of the web browser that remains visible ALL THE TIME, on top of the page content during scroll - about 100px in height, so that people can see it on every page. See example here - this is a wordpress site, but exactly what my client wants for that bottom-of-page always-on-top newsletter call to action: https://pippagrant.com/ For the life of me, I cannot figure out what to do with code to create this functionality! 😅 I know how to create a sticky header, but when it comes to always-visible bottom blocks, I have no clue how to set that up. Any help or direction would be so appreciated, thank you!!
  4. Site URL: https://chihuahua-wrasse-j3yk.squarespace.com/ So I'm not sure if my title communicated what I'm trying to achieve correctly, but what I would like to do is visible in the attached screenshots. I would like to create these floating cut out images in one of my sections (desktop attachment). Then, when on mobile, I would like those images to be different sizes and in different places so they don't block the text (mobile attachment). Currently I'm using the advice from this thread: https://forum.squarespace.com/topic/144946-how-to-use-code-block-to-insert-a-floating-image/ for the hoop on the website right now but I was wondering if there was another way to do it since I have so many elements. Additionally, the frames image needs to be fixed to the section below it (the green section) and I wasn't able to achieve that with the code from the previous thread. Password to view site: edstudio Thank you in advance!
  5. Site URL: http://www.yen-ng.com Hi, can someone help me with a CSS to float site title to left side and menu to the right site of my page? I'm using Flatiron template. Thanks!
  6. Site URL: https://www.olivermparker.com Hi everyone and thank you in advance! Im looking to add to CTA buttons on the right hand side of my website. The first one is an email button and the second is a Call Now button. my website is www.olivermparker.com Would anyone be able to help with the code needed for this? If you need any extra info, please let me know! Many Thanks Oli
  7. Site URL: https://support.cargo.site/Make-an-Image-Fly-Across-the-Screen I found this example on Cargo for an image that moves across the screen continuously: https://support.cargo.site/Make-an-Image-Fly-Across-the-Screen But I can't seem to find CSS that works for Squarespace in the same way. Do I need to set this up using Jquery?
  8. Site URL: https://www.theblinkdate.com/ Hi, I would like to float the 3 fields in my form block side-by-side. I'd like for the forms to fields to remain centered on the page and lined up with the other elements on my page. When using a smaller screen size, I'd like to fields to stack for easier use. Thanks! Doug
  9. Site URL: http://www.greatcountryfinancialplanning.com Would anyone have any recommendations for the code needed to embed a floating image at the bottom of your site/page as you scroll? The link below provides an example of what we're trying to achieve on our Squarespace site. Note how the 'BrokerCheck' image in the lower-right corner is visible at all times. http://www.greatcountryfinancial.com/ Thank you for your assistance, knowledge, and time to share your thoughts.
  10. Site URL: https://www.joeblackham.com/new-page I'm having difficulty with the position of some custom CSS I'm using for Pricing Tables. When I am in the edit mode, the tables all position next to each other (which is what I would like). However, when I click done and come out, they reposition underneath each other. My code blocks are positioned next to each other, so this makes me think it's something in the CSS making this happen! This is the code I'm using: @import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,700italic,700,900italic,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); @import url(https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900); body{background-color:#eee;} #generic_price_table{ background-color: #f0eded; } #generic_price_table .generic_content{ background-color: #fff; } #generic_price_table .generic_content .generic_head_price{ background-color: #f6f6f6; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ color: #525252; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ color: #414141; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li{ color: #a7a7a7; } #generic_price_table .generic_content .generic_feature_list ul li span{ color: #414141; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ background-color: #E4E4E4; border-left: 5px solid #2ECC71; } #generic_price_table .generic_content .generic_price_btn a{ border: 1px solid #2ECC71; color: #2ECC71; } #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg{ border-color: #2ECC71 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #2ECC71; color: #fff; } #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head span, #generic_price_table .generic_content.active .generic_head_price .generic_head_content .head span{ color: #fff; } #generic_price_table .generic_content:hover .generic_price_btn a, #generic_price_table .generic_content.active .generic_price_btn a{ background-color: #2ECC71; color: #fff; } #generic_price_table{ margin: 50px 0 50px 0; font-family: 'Raleway', sans-serif; } .row .table{ padding: 28px 0; } /*PRICE BODY CODE START*/ #generic_price_table .generic_content{ overflow: hidden; position: relative; text-align: center; } #generic_price_table .generic_content .generic_head_price { margin: 0 0 20px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content{ margin: 0 0 50px 0; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg{ border-style: solid; border-width: 90px 1411px 23px 399px; position: absolute; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head{ padding-top: 40px; position: relative; z-index: 1; } #generic_price_table .generic_content .generic_head_price .generic_head_content .head span{ font-family: "Raleway",sans-serif; font-size: 28px; font-weight: 400; letter-spacing: 2px; margin: 0; padding: 0; text-transform: uppercase; } #generic_price_table .generic_content .generic_head_price .generic_price_tag{ padding: 0 0 20px; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price{ display: block; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .sign{ display: inline-block; font-family: "Lato",sans-serif; font-size: 29px; font-weight: 400; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .currency{ font-family: "Lato",sans-serif; font-size: 60px; font-weight: 300; letter-spacing: -2px; line-height: 60px; padding: 0; vertical-align: middle; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .price .cent{ display: inline-block; font-family: "Lato",sans-serif; font-size: 24px; font-weight: 400; vertical-align: bottom; } #generic_price_table .generic_content .generic_head_price .generic_price_tag .month{ font-family: "Lato",sans-serif; font-size: 18px; font-weight: 400; letter-spacing: 3px; vertical-align: bottom; } #generic_price_table .generic_content .generic_feature_list ul{ list-style: none; padding: 0; margin: 0; } #generic_price_table .generic_content .generic_feature_list ul li{ font-family: "Lato",sans-serif; font-size: 18px; padding: 15px 0; transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li:hover{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } #generic_price_table .generic_content .generic_feature_list ul li .fa{ padding: 0 10px; } #generic_price_table .generic_content .generic_price_btn{ margin: 20px 0 32px; } #generic_price_table .generic_content .generic_price_btn a{ border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; -webkit-border-radius: 50px; display: inline-block; font-family: "Lato",sans-serif; font-size: 18px; outline: medium none; padding: 12px 30px; text-decoration: none; text-transform: uppercase; } #generic_price_table .generic_content, #generic_price_table .generic_content:hover, #generic_price_table .generic_content .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head_bg, #generic_price_table .generic_content .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content:hover .generic_head_price .generic_head_content .head h2, #generic_price_table .generic_content .price, #generic_price_table .generic_content:hover .price, #generic_price_table .generic_content .generic_price_btn a, #generic_price_table .generic_content:hover .generic_price_btn a{ transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; -webkit-transition: all 0.3s ease-in-out 0s; } @media (max-width: 320px) { } @media (max-width: 767px) { #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 768px) and (max-width: 991px) { #generic_price_table .col-md-3{ float:left; width:50%; } #generic_price_table .col-md-4{ float:left; width:50%; } #generic_price_table .generic_content{ margin-bottom:75px; } } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px) { } #generic_price_table_home{ font-family: 'Raleway', sans-serif; } .text-center h1, .text-center h1 a{ color: #7885CB; font-size: 30px; font-weight: 300; text-decoration: none; } .demo-pic{ margin: 0 auto; } .demo-pic:hover{ opacity: 0.7; } #generic_price_table_home ul{ margin: 0 auto; padding: 0; list-style: none; display: table; } #generic_price_table_home li{ float: left; } #generic_price_table_home li + li{ margin-left: 10px; padding-bottom: 10px; } #generic_price_table_home li a{ display: block; width: 50px; height: 50px; font-size: 0px; } #generic_price_table_home .blue{ background: #3498DB; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .emerald{ background: #2ECC71; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .grey{ background: #7F8C8D; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .midnight{ background: #34495E; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .orange{ background: #E67E22; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .purple{ background: #9B59B6; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .red{ background: #E74C3C; transition:all 0.3s ease-in-out 0s; } #generic_price_table_home .turquoise{ background: #1ABC9C; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .blue:hover, #generic_price_table_home .emerald:hover, #generic_price_table_home .grey:hover, #generic_price_table_home .midnight:hover, #generic_price_table_home .orange:hover, #generic_price_table_home .purple:hover, #generic_price_table_home .red:hover, #generic_price_table_home .turquoise:hover{ border-bottom-left-radius: 50px; border-bottom-right-radius: 50px; border-top-left-radius: 50px; border-top-right-radius: 50px; transition: all 0.3s ease-in-out 0s; } #generic_price_table_home .divider{ border-bottom: 1px solid #ddd; margin-bottom: 20px; padding: 20px; } #generic_price_table_home .divider span{ width: 100%; display: table; height: 2px; background: #ddd; margin: 50px auto; line-height: 2px; } #generic_price_table_home .itemname{ text-align: center; font-size: 50px ; padding: 50px 0 20px ; border-bottom: 1px solid #ddd; margin-bottom: 40px; text-decoration: none; font-weight: 300; } #generic_price_table_home .itemnametext{ text-align: center; font-size: 20px; padding-top: 5px; text-transform: uppercase; display: inline-block; } #generic_price_table_home .footer{ padding:40px 0; } .price-heading{ text-align: center; } .price-heading h1{ color: #666; margin: 0; padding: 0 0 50px 0; } .demo-button { background-color: #333333; color: #ffffff; display: table; font-size: 20px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 50px; outline-color: -moz-use-text-color; outline-style: none; outline-width: medium ; padding: 10px; text-align: center; text-transform: uppercase; } .bottom_btn{ background-color: #333333; color: #ffffff; display: table; font-size: 28px; margin: 60px auto 20px; padding: 10px 25px; text-align: center; text-transform: uppercase; } .demo-button:hover{ background-color: #666; color: #FFF; text-decoration:none; } .bottom_btn:hover{ background-color: #666; color: #FFF; text-decoration:none; }
  11. Site URL: https://moox.house/training Hi all, Custom code newbie here. I need to make the 'book now' button on a product page float on mobile (and keep it static on web). I'm looking to have it stick to the bottom of the page, ideally something like the attached example. My page is live at https://moox.house/training. Does anyone know how to get this done? Thanks
  12. Site URL: https://madelainesanta.com Hello, I am trying to position a small graphic to float over my website on the bottom right. I pasted the HTML code into a section, but the image is confined to the boundaries of the section and can't be positioned where I want it. I want it to look like this (see attachment). Current code is: <IMG STYLE="position:absolute; TOP:10px; LEFT:500px; WIDTH:150px; HEIGHT:150px" src="https://i.ibb.co/sHGGxCL/clickhere-01.png" class="rotate" a href="mailto:hi@madelainesanta.com"> I appreciate your help in advance!
  13. Site URL: https://chicory-krill-h754.squarespace.com/config/ Hi, Is it possible to float an image between two sections in 7.1. My test site is: https://chicory-krill-h754.squarespace.com/config/ I've attached what I did in 7.0. Wondering if the same is possible? Thanks Jennifer
  14. I'm pretty new to Squarespace but I've been picking apart code for quite some time. I'm trying to put a floating button on a single page that will pop a lightbox form. I actually have it completely working using a collection tag with CSS and Advanced HTML. I was able to get it working exactly the way that I want by creating a button elsewhere in the page and then copying the code and adding it to the floating button. However, I end up with the original button AND the floating button on the page. The problem is that if I delete the original button then the floating form stops working. I feel like the solution would be to try and completely hide the original form or somehow change the original button to be the floating one. Any ideas or suggestions are greatly appreciated! Thank you!
  15. I am creating a site for a client which is looking to have a floating "online booking" or "book your room" button that is floating on the top right hand corner of the screen. We want to have the call to action button always there. I've seen code injections for adding the "top" button to scroll to top, but how do i create an "online booking" button that will link to the reservation site. (another page). Any tips would help! Thank you!
  • Create New...