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



Found 7 results

  1. 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?
  2. 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; }
  3. 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
  4. 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!
  5. 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
  6. 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!
  7. 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...