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

Search the Community

Showing results for tags 'squarespace-7.1'.

  • 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
    • Selling & Scheduling Your Services
    • 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
  • German Circle Members's Topics

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



About Me




Expert ID

  1. Hi first time using Squarespace to set up my photography website. I'm not familiar with coding so need some help with removing the < previous project and next project > links that show at the end of the gallery block as below. I can't select the links whilst in edit to delete. When i inspect the page coding it looks like the code below controls this section as it entire line (i.e. arrows and words) are removed from the squarespace page when i delete the html code, but reappears when i exit editing. Can anyone help with a code i can insert into the specific pages that i would like to use portfolios in? <section class="item-pagination item-pagination--prev-next" data-collection-type="portfolio-grid-basic" data-controller="ItemPagination" data-controllers-bound="ItemPagination" id="yui_3_17_2_1_1577582297708_1767"> <a href="/portfolio/project-one-lx24m" class="item-pagination-link item-pagination-link--prev" id="yui_3_17_2_1_1577582297708_1766"> <div class="item-pagination-icon icon icon--stroke"> <svg class="caret-left-icon--small" viewBox="0 0 9 16"> <polyline fill="none" stroke-miterlimit="10" points="7.3,14.7 2.5,8 7.3,1.2"></polyline> </svg> </div> <span class="pagination-title-wrapper" id="yui_3_17_2_1_1577582297708_1765"> <div class="item-pagination-prev-next">Previous</div> <h2 class="item-pagination-title" id="yui_3_17_2_1_1577582297708_1764">Project One</h2> </span> </a> <a href="/portfolio/project-three-xswdx" class="item-pagination-link item-pagination-link--next"> <div class="pagination-title-wrapper"> <div class="item-pagination-prev-next">Next</div> <h2 class="item-pagination-title">Project Three</h2> </div> <div class="item-pagination-icon icon icon--stroke"> <svg class="caret-right-icon--small" viewBox="0 0 9 16"> <polyline fill="none" stroke-miterlimit="10" points="1.6,1.2 6.5,7.9 1.6,14.7"></polyline> </svg> </div> </a> thanks
  2. Site URL: https://hoficascora.squarespace.com/ I am trying to create a portfolio hover effect on the homepage. When hovering over the different items, the background image changes (which is good), but the header background also keeps appearing. I've tried changing the header to transparent etc. but no luck yet. Any idea on how to fix this?
  3. Hey there. I'm not a marketer by trade, but I've read dozens of posts on marketing and SEO with Squarespace, including ones where it's pretty clear you can't run clean A/B tests. While disappointing, I'm still going to be doing so with Google Optimize as best I can. My main quandary is this: How can I effectively A/B test product price points? i.e. I want to split my audience to two product pages that are identical, except they have two different prices. Is the only way to duplicate all products, set them to "Hidden", and redirect a % of clicks to them through experiments? Would that even work as I expect it to? Site is yet unpublished, for reference. Just laying all the groundwork before launch next month.
  4. Hi, I'm trying to add a sticky section or block to a page. To make this easy to add to future pages without specifying particular block or section IDs, I am happy to apply it to all instances of a particular style or type of block, which would only be used for this purpose. I'm thinking either Heading 4 in a text block, or the Content Link block, unless you have a better suggestion. Best example of this behaviour I can find is by Apple: https://www.apple.com/au/ipad-air/ ...note the main nav is not fixed, but the 'sub-nav' of iPad Air pages (Overview, Why iPad, etc) remains sticky at the top. Any ideas? Cheers :)
  5. Site URL: https://www.urquhartglass.com Hello all, Hoping someone can help me navigate around changing the background in a 7.1 Cart page... The site is black, and I'd like the cart and checkout to be a light background as some of the elements in a 7.1 cart page don't show up on black, i.e the remove X. The 'Use light background' in checkout is working just fine, but the cart page prior to checkout still remains dark. If you'd like to see the site mentioned above, please let me know and I'll message the password. However hoping someone can just tell me how to target the background of the specific page like I can do in Brine for example...! Thanks Sarah
  6. Site URL: https://www.studiofurks.com/ Hello, I needed help with some CSS, I wanted to adjust the text size and padding for the navigation (mobile only) as I like the desktop sizing and padding. Could anyone help me with this please?
  7. Site URL: https://seahorse-hexahedron-j6d5.squarespace.com I would live to remove the logo from only my homepage on this draft site. password 1313 I have tried this but it did not work... .homepage #header #logoImage { display: none } thanks
  8. Site URL: https://intuitive-wellbeing.squarespace.com/retreats I'm wondering why on mobile this rotating text animation won't move the text to a new line? https://share.getcloudapp.com/mXurDQX2 // ✦ ROTATING TEXT ✦ // .sp-intro { width: 90%; max-width: 90%; text-align: center; margin: 0 auto; } .sp-headline { margin: 0 !important; } .sp-intro, .sp-words-wrapper { h3, b, i, p, span { font-weight: 300; } } .sp-words-wrapper { display: inline-block; position: relative; text-align: left; width: auto !important; } .sp-words-wrapper b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; } .sp-words-wrapper b.is-visible { position: relative; } .no-js .sp-words-wrapper b { opacity: 0; } .no-js .sp-words-wrapper b.is-visible { opacity: 1; } .is-visible { overflow: visible!important; } .sp-headline.slide span { display: inline-block; padding: 0; } .sp-headline.slide .sp-words-wrapper { overflow: hidden; vertical-align: bottom; width: auto; } .sp-headline.slide b { opacity: 0; top: .2em; } .sp-headline.slide b.is-visible { top: 0; opacity: 1; -webkit-animation: slide-in 0.6s; -moz-animation: slide-in 0.6s; animation: slide-in 0.6s; } .sp-headline.slide b.is-hidden { -webkit-animation: slide-out 0.6s; -moz-animation: slide-out 0.6s; animation: slide-out 0.6s; } @-webkit-keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes slide-in { 0% { opacity: 0; -moz-transform: translateY(-100%); } 60% { opacity: 1; -moz-transform: translateY(20%); } 100% { opacity: 1; -moz-transform: translateY(0); } } @keyframes slide-in { 0% { opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); } 60% { opacity: 1; -webkit-transform: translateY(20%); -moz-transform: translateY(20%); -ms-transform: translateY(20%); -o-transform: translateY(20%); transform: translateY(20%); } 100% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); } } @-moz-keyframes slide-out { 0% { opacity: 1; -moz-transform: translateY(0); } 60% { opacity: 0; -moz-transform: translateY(120%); } 100% { opacity: 0; -moz-transform: translateY(100%); } } @keyframes slide-out { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 60% { opacity: 0; -webkit-transform: translateY(120%); -moz-transform: translateY(120%); -ms-transform: translateY(120%); -o-transform: translateY(120%); transform: translateY(120%); } 100% { opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); } } @media screen and (max-width: 768px) { .sp-intro p, .sp-words-wrapper p, .sp-intro span, .sp-words-wrapper span { font-size: 1rem!important; } .sp-words-wrapper { width: 100% !important; } }
  9. Hello, I posted a question on this forum ten days ago regarding resizing portrait-oriented images to match the height of two landscape-oriented ones in the masonry grid. (I deleted the old post because it seems that it made me unable to create a new one into the same category.) I found out the right CSS to do that: .gallery-masonry-item img { max-height: 547px !important; object-fit: contain !important; } Now I have a new problem: while the image's height is correct and align with the two on its side, I still get a gap space under it so I continue to have the problem in the following rows. I think it depends on the wrapper or on the spacing between the rows in the grid but I cannot figure out how to write the solution in CSS. I attached a screenshot to show the situation. Could you help me finish the code to solve this? Thank you.
  10. Under the color styles I find a place to change all font colors except miscellaneous ones which I use for main text. I want it to make it grey or just add opacity so it greys out a bit but i cant find a place to do it. How would i do it in css? Thanks for help
  11. Site URL: https://www.thehabituallyelevated.com/habitually-gaming Below is the custom code I'm trying to list on my website: Glowing Animated Dots I've since made minor tweaks to try and adjust the appearance on the website but nothing as of yet. There is a full screen screenshot of my issue attached for reference. My website is The Habitually Elevated. I've watched several YouTube videos and have read several forums regarding what I thought was going to resolve my issue. Nothing has seemed to work so far... Maybe I'm simply confused or overlooking a small detail? The glowing dots are supposed to float around the page. My issue (as you can see) is how incredibly long the code block is that's on the page. Doesn't matter where on the page or which section the code itself is listed, same affect. Can some please help me to get my desired results? Thanks in advance!
  12. I installed an anchor link on my homepage in Squarespace 7.1 and when i click the link it jumps to the section instead of scrolling down to it. I'm using a CODE block with a DIV ID in the section I want to scroll to. see code below: <div id="pp"></div> and for the text link I put: /homepage/#pp It doesn't scroll, it just loads the section that has the Code Block with ID. Any help is appreciated. Thx
  13. Just want to remove the underline for text links on a version 7.1 site.
  14. Site URL: https://aria.squarespace.com/ Hi, Using version 7.1. I would like to create a seamless gradient background for all the pages, including the portfolio page but excluding the footer. However, the code I am using is creating a gradient for each section. Here is the code I am using: .white:not(.has-background) .section-background { background-image: linear-gradient( to bottom right, #99cbc6, #e3ccc2 ) } Please help! Thanks in advance for the input. The gradient is applying separately to each section here: What I would like to achieve:
  15. Site URL: http://Bitcoin-Trend-Trader.com Someone on this site started to help me then completely disappeared. I have a custom PayPal button that enables customers to subscriptions to my Bitcoin technical analysis indicators. The CSS code is injecting the button at the very bottom of every footer. I need to resize and re-position this button. Image below show the issue and my desired resoluton. I am not have any problems with the functionality of the button, only it size and position. I asked PayPal for support and was informed it was a Squarespace problem. I asked Squarespace for support and was told it was my problem. I went on "Hire an expert," and was told my job was too small to be bothered with. One developer suggested I ask for assistance on this forum. Glad to pay someone for the 30 minutes that will probably take. If you would rather have a free subscription to my technical indicators for trading Bitcoin, I would be glad to provide them to you. Thanks for any help or suggestions, Michael
  16. Adding square qr code and selling page to my site. I have a square account, and want to set up a selling page there for my art. I want to post the qr code and a click able link on my site, is there a better way to integrate?
  17. Site URL: https://megalodon-jellyfish-ahzy.squarespace.com/ When building blank pages and in the about page on my site, there is seemingly a phantom white block that's showing up between the content and the footer when I'm using the Black Minimal Color Scheme. There isn't a block there when I go in to edit. Anyone know what this might be? I have put some code in but I don't think that would affect it. Here's the code I've inserted: /*the following code mimics the portfolio flatiron template with fade in rollover text*/ /* increase image transparency on hover */ img.summary-thumbnail-image.loaded:hover { opacity: 0.4; } /* display title on hover*/ .sqs-block-summary-v2 .summary-item .summary-title a{ background-color: transparent; opacity: 0; color: #fff; position: absolute; left: 0; right: 0; top: 45%; margin-left: auto; margin-right: auto; } .sqs-block-summary-v2 .summary-item:hover .summary-title a{ background-color: transparent; opacity: 4; color: #FFF; position: absolute; left: 0; right: 0; top: 45%; margin-left: auto; margin-right: auto; } /*style title font hover for summary wall block*/ .sqs-block-summary-v2 { .summary-title, .summary-heading { font-family: 'FOUNDERSGROTESK'!important; font-weight: 400 !important; font-size: 30px !important; color: #FFF; } } /*eliminates white space between thumbnails*/ .summary-thumbnail-container, .summary-title { margin-bottom: 0 !important; } .summary-item {background-color: #000000;} @font-face { font-family: 'FOUNDERSGROTESK'; src: url('https://static1.squarespace.com/static/5e8f3ac78b89c5205e278f15/t/5e96dd80faeb9808759ae30c/1586945408521/FoundersGrotesk-Light.otf'); } h {font-family: 'FOUNDERSGROTESK';} h1 {font-family: 'FOUNDERSGROTESK';} h2 {font-family: 'FOUNDERSGROTESK';} h3 {font-family: 'FOUNDERSGROTESK';} h4 {font-family: 'FOUNDERSGROTESK';} p {font-family: 'FOUNDERSGROTESK';} p2 {font-family: 'FOUNDERSGROTESK';} p3 {font-family: 'FOUNDERSGROTESK';} p4 {font-family: 'FOUNDERSGROTESK';} .blog-item-title h1.entry-title { font-family: FOUNDERSGROTESK !important; } .header-nav .header-nav-item a { font-family: 'FOUNDERSGROTESK'; } .header-nav-folder-content .header-nav-folder-item a { font-family: 'FOUNDERSGROTESK'; } .header-menu-nav-item a { font-family: 'FOUNDERSGROTESK'; } .item-pagination h2.item-pagination-title { font-family: 'FOUNDERSGROTESK'; } .sqs-block-button-element { font-family: 'FOUNDERSGROTESK'; font-size: 20px !important; font-weight: 500 !important; height: 20px !important; } @media screen and (max-width:640px) { nav.header-menu-nav-list { background: black; } }
  18. Hi, I'm having issues making my instagram feed full bleed. ive use the code below but there is still padding on the left and right and I cant remove it. Any thoughts? //instagram footer// [data-section-id="5f36f92cd2f3677399df26bc"] .content-wrapper { padding-left: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; margin-bottom: 0px !important; } div#block-yui_3_17_2_1_1597438235439_32573 { padding-bottom: 0 !important; } https://gardenia-cyan-txbg.squarespace.com/ password feel2020
  19. Site URL: https://www.deprio.com/search Hi! I am trying to remove the focus border (outline) around the text/input in my search box. Is it possible to do this with CSS? The outline did not start appearing until yesterday and I'm using Squarespace 7.1. Thanks!
  20. Hi! I want my logo on the right side of my header and nav options on the left. I'm currently only given the option to have the logo on the right side or centered with various positions for navigation. I've checked to see what template I'm using and only see version 7.1 so I'm not sure if that is the issue or how I would be able to fix it. Please help!
  21. Site URL: https://duck-buffalo-k3d3.squarespace.com Hello! I am trying to change the two of the links on my navigation menu to red while keeping the others the same color. Here is the code I am using for the navigation menu: //Dropdown Folder Style .header-nav-folder-content { background: #d5d6da !important; color: #091e3e !important; font-size: 15pt; font-family: 'Courier'; letter-spacing: .5px; } //Dropdown Folder Label .header-nav-wrapper a { background-image: none !important; font-family: Arial; color: #091e3e !important; } Appreciate any help!
  22. Hi all, I'm trying to get a floating "rotate device" icon on the bottom of the screen for mobile only to prompt users to rotate their device for optimal view of some landscape photography. The icon should show in a portrait orientation and hide in a landscape orientation. Many thanks, Apollow90
  23. Does anyone know how I can achieve this header on 7.1 (see screenshot attached)? Obviously I can change the layout so the logo is above the navigation but how can I colour block the navigation and make sure the logo appears on it's own background? @tuanphan tagging you incase you know of a solution. 🙂
  24. Site URL: https://www.rockycoastacupuncture.com/journal/the-acupuncture-approach-to-diagnosing-fertility-issues I am working in 7.1 and looking to change the author link (that links to list of all posts by this author) at the bottom of each post in the author bio to link instead to the author's full bio in the About section. We currently have 2 authors and they would each have their own link. If this is not possible, I would like to remove this link completely. Additionally I want to enlarge the photo. Bonus points if I can enlarge and move the photo to the left of the bio text—while the author name remains where it is. Is there a way to do this?
  25. Site URL: http://psykologopsen.no Hi, The logo on my mobile menu is white and I have the other version of the logo, but how do I make it change to black logo when entering the menu only on mobile devices? Best regards, Gerhard
  • Create New...