Search the Community

Site URL: https://asparagus-pepper-wa4b.squarespace.com I'm looking to achieve the attached image in the product pages in the 'Additional Information' section. I have tried out a couple of css codes found on here but unfortunately it's not something that works on my website. Does anyone have any suggestions? Thank you!! 😀 (Password is 123456)

Site URL: https://inoubli4ble.art/digital-art Hi, the link of the page is attached. I would like to have the titles in the grid in dark mode in the color white. Now they always disappear when I switch from light mode to dark mode. I hope someone can help me. Best regards, L

Site URL: https://realbedford.com/mens-fixtures I am attempting to create a fixture list for my football team but in the mobile view it looks terrible. Is there any way to fix this?

Site URL: https://lute-round-fb66.squarespace.com/ Site password : InProgress I would like to move the header that is with Squarespace 7.1 at the top of the screen to the left side of the screen. To do so we need to rearrange the elements in column and not side to side and this is where I am blocking. Ideally, I would love to be able to control the space between the elements (logo, navigation links, and social links), and have the elements all centered in the middle of the header space. I tried to do a mock-up of what I would like based on what I currently have in the pictures. The change would be only for the desktop version of the website, for mobile I would like to keep the default burger menu. Thanks a lot for your help

Site URL: http://www.readersinspired.com Hi everyone! I hope you are well. I am a bit stuck at the moment. I am looking for a way to use a custom CSS font and design of summary items and title on my site in a way that only affects pages under a specific folder (in my cause the "+Shop African Books," folder which include the following pages): West Africa East Africa North Africa Central Africa Southern Africa Non-Country Specific Pan African However the code I put in the the Design -> Custom CSS section of Squarespace (see below) has resulted in a global change of all summary items and titles. Is there a way this change to only affect the pages in the "+Shop African Books" folder and not additional parts of the site outside of this folder like it currently is now: .summary-title {font-family:Serif; font-size: 1.5rem!important} .summary-title {font-weight:bold} .summary-item {box-shadow:5px 5px 15px #ddd} .summary-item:hover {box-shadow:5px 5px #aaa}

Site URL: https://www.thelibertyproject.org/ Hey, all. I have used this code ( a mix of html, css and javascript) to design a vertical animated timeline with the help of a youtube video ( For some reason, however, instead of appearing on both the left and right side, my text only appears on the left, even though it is fading in from opposite directions as denoted by the nth child selector. Attaching my CSS here for reference: //Section 3// .top-section{ text-align: center; max-width: 800px; margin: 0 auto; } .timeline{ position:relative; min-height: 150px; } .line{ position: absolute; z-index:2; left: calc(50% - 1px); width: 2px; top: -50px; bottom: -50px; background-color: #000; display: none; } .line:before, .line:after{ position: absolute; display: block; content: ''; height: 1rem; width: 1rem; border-radius: 50%; background-color: #000; left: 50%; transform: translateX(-50%); } .line:after{ bottom:0; } .section{ display: flex; opacity: 0; transform: translateX(-100%); transition: 500ms ease; position: relative; z-index: 1; margin: 20px 0; padding-left: 9rem; border-radius: 1 rem; align-items: right; min-height: 250px; } .section:nth-child(odd) { flex-direction: row-reverse; transform: translateX(100%); } .bead{ position:absolute; display: block; height: 1rem; border-radius: 50%; background-color: #000; left: 50%; top: 20%; transform: translateX(-50%); } .content{ width: calc(50% - 2rem); } .show-me:nth-child(n) { transform: none; opacity: 1; } Please help me figure this out! Thanks in advance. If possible, also please do let me know which codes to change to alter the color of the main line and circles! ❤️

Site URL: https://fish-nectarine-wbzr.squarespace.com/reel I'd like to display video captions on hover instead of below the video. Is there a way to do this, perhaps with an overlay color so the captions are more visible? I'm attaching an example from another site. Thanks!

Site URL: https://www.markdanielquintos.com Hi, I'm using the Avenue template and am trying to change the size of my titles on mobile. I've tried copying and pasting a couple of other codes I've seen on the forums, but none work. I'm on a personal account, but this seems like something that should be fairly simple to do? Perhaps I'm wrong. Thank you!

Site URL: https://purposecon.squarespace.com/?password=pearler I'm trying to style and reposition the floating cart. Any ideas? My codes don't seem to work: .floating-cart { top: 20px !important; right: 20px !important; } It also doesn't seem to appear on non-shop related pages?

Site URL: https://pumpkin-lime-8bna.squarespace.com/ Hello I've got some scrolling text as an announcement bar in this site https://pumpkin-lime-8bna.squarespace.com/ pw AWC123 It's currently got a huge blank gap between scrolls, I'd love for it to be on a continuous loop rather than having a gap between loops. Is anyone able to help? This is the code I've used to get it to this so far below. Thanks in advance. .sqs-announcement-bar-dropzone { position: -webkit-sticky!important; position: sticky!important; top: 0!important; z-index: 9999!important; } .show-on-scroll-wrapper.show { display: none!important; } /* Removing the underline on link in the announcement bar */ .sqs-announcement-bar-text a{ text-decoration: unset !important; } /* Adding left and right padding, change to match your site padding if needed */ .sqs-announcement-bar-text{ padding-left: 40px; padding-right: 40px; } /* Hiding anything that extends beyond the screen */ #announcement-bar-text-inner-id { margin: 0 auto; overflow: hidden; } /* Starting the text off of the screen and adjusting width, change the animation: 15s to however long you want the marquee to take in seconds */ #announcement-bar-text-inner-id p { display: inline-block; width: max-content; padding-left:100%; will-change: transform; animation: marquee 25s linear infinite; } /* Stopping the marquee on hover so people can click on links */ #announcement-bar-text-inner-id p:hover { animation-play-state: paused } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }

For some reason I can change the size of everything but the title in the auto layout sections. Currently the title size is really small and almost unreadable on desktop. Is there a way to add CSS which adjusts the font size in this section? I used inspect element and changed the <strong> html to <h2> and that adjusted the size but I can't figure out how to translate that to CSS

Site URL: https://angiethomas.com/contact/ Trying to get a border around social links and text like the contact page on this example site. Here is how my current site looks. https://michellecoles.com/

Site URL: https://www.mightyfinemfg.com I have a site I'm working on - mightyfinemfg.com I'm having issues with my H1s not displaying in the center on mobile and tablet. It could be the font itself, but I'm not sure. Any ideas on how to center with CSS? Just mobile/tablet only. URL: www.mightyfinemfg.com Pass: amightyfineproduct

Site URL: https://hippopackaging.com/video I'd like to eliminate the Gray overlay on this page video https://hippopackaging.com/video Also would like the video to resize proportionally on mobile. At the moment you can see only the middle part on mobile. Thank you

Site URL: https://restoredformoms.com/ Hello! I've included two screenprints below. Can someone please advise how to change the image for the event list to be square? When you are on the site and you select: "events" + "upcoming events" Those images are 1:1 (square) Select any event Select "back to all events" Then shows a diff view of the events (not 1:1) This different view is where you will notice the images are cropped on the top and bottom for the "Restored Play Date" as the designed images are square. It doesn't look like I can change to square and do not know what else to do? Thanks so much!

Site URL: https://www.agentrx.co/ Hello! Trying to make the card on this slideshow banner just below the heading to be 30% transparent. Thank you, Bridget

Site URL: http://www.hornstrength.com Pulling my hair out over this one. I set up my blog with a custom author bio at the bottom. It's basically pulling in a summary block from another blog. Here's the guide I followed: https://www.bigcatcreative.com/blog/how-to-create-a-blog-signature-in-squarespace Here's a template blog post with the summary block at the bottom for the author bio: https://www.hornstrength.com/blog/5qqpcduqrtueykvfk1utoq7wtiuria The summary block is pulling from here (another blog): https://www.hornstrength.com/authors-profile I'm happy with it, except I'd like to change the font family for the summary to 'Roboto' and I can't do it. I suspect it has something to do with the custom CSS I added to change the font for the body of my blog posts from the site default to "minion'. .blog-item-content.e-content * { font-family: 'minion' !important; font-size: 22px; } That seems to override every attempt to change just the summary block font. Thanks for any guidance you can provide!

Site URL: https://scarlet-magenta-kera.squarespace.com/orthopedic-issues password: VMPT123 I want the drop down menu as it is now, however orthopedics/sports is always underlined, how can I remove that below is the code i am using currently .header-nav .header-nav-item--folder .header-nav-folder-content{ font-weight: bold; } a.header-nav-folder-title:hover + div, .header-nav-folder-content { text-align: left !important; position: absolute; left: 100% !important; right: 0% !important; -webkit-transform: translatex(-50%); -o-transform: translatex(-50%); transform: translatex(-50%); background: transparent !important; } thanks

Site URL: https://palestinefund.squarespace.com/ password: Palestine Hi I want to remove the white box that popups up when you click to add in your email, as well as when you type the text be white not black --- see attached photo this is the current code I have now footer.sections input { border-color: white !important; background: transparent !important; border-top: none !important; border-left: none !important; border-right: none !important; } footer.sections input::placeholder { color: white !important; } footer.sections button.newsletter-form-button.sqs-system-button.sqs-editable-button-layout { color: black !important; border-color: black !important; }

Site URL: https://goldfish-red-5c6m.squarespace.com/ I am trying to make a burger menu that opens to the top left and extends outward (and is transparent) instead of down (see attached photo) not sure this is possible, but this is the code I have for now .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible;} .header .header-burger{display:flex} .header-nav, .header-actions {display:none} .header--menu-open .header-menu { opacity: 1; visibility: visible; box-shadow: -5px 5px 15px #000}

Site URL: https://cricket-poodle-pdnh.squarespace.com/ Hello - I want to add a background image on 1 page section, the "menu" page, that looks as if I have side borders. I currently have them uploaded as image blocks, but that becomes problematic in mobile mode so I have hidden them from showing up on mobile. I want the look I already have , but as a background instead of image blocks so the desktop and mobile sites will have this continuous side border. Not sure how to do this, and what any css coding is.f icons. Any insight as to the coding or sizing? Site: https://cricket-poodle-pdnh.squarespace.com/

Hi, I'm looking to style the buttons to look like this with the hover effect as seen in this link https://codepen.io/electerious/pen/qPjbGm I would need to style the button at the end of the navigation menu, newsletter/form sign up button and the normal buttons. The code is in the link but I'm struggling to use it to target the buttons in squarespace. I'm testing it out on a new 7.1 site build. Can anyone help?

Site URL: https://catiemacken-test.squarespace.com/ Hi there, I am using an accordion menu on my site but it's loading with a LOT of extra padding on the bottom in mobile. Screen grab attached. Can someone help me out with a snippet that will decrease this padding on mobile? It looks good on desktop. I am working with the fluid engine editor — I did try to go into the mobile view and decrease the row count, but it won't let me. Thanks in advance!

Site URL: https://sprout-dragonfly-f48x.squarespace.com/ Hi there, I'm implementing an image in my website that I need only at 25 % of its size. On the desktop version I just implemented some empty space next to it to resize the whole thing. However, on mobile the image appears full screen. I resized it via CSS to max-width of 25 % but it's either possible for all images (than it works fine but all other images are just as small) or I target only the specific image with data-image-id but that's not working. It resizes the image but the whole container stays the size of the full size image and therefore creates too much space underneath the now smaller image. I've used this CSS code: @media screen and (max-width: 640px) { [data-image-id="60e8168657d2352c927ec54d"] { max-width: 25%; max-height: 25%; } } In the attachment I show you a screenshot of what it looks like now on the website. I also attach an image of what I want it to look like (if I address all images it works perfectly but not when I try to address only the one). Thank you for your help! Sarah

Site URL: https://springtail-violin-hntl.squarespace.com/ Hi guys, I've searched on google and the forum but there are a few steps I couldn't figure out yet (most of the css I searched and fixed myself) I know the settings within the GUI that I'd like, but I don't know how to translate them to the CSS code. Link: https://springtail-violin-hntl.squarespace.com/ Password: waterkantThe settings I'd like are as follows: HEADER Homepage: Home -> Design -> Site styles -> Fonts -> Assign Styles -> Site Navigation -> Size -> Custom 1.4rem Home -> Edit (page) -> Edit Site Header -> Desktop Icon -> Link Spacing 3.0 exclude the header social icons exclude the header button HEADER everywhere else: 1: Home -> Design -> Site styles -> Fonts -> Assign Styles -> Site Navigation -> Size -> Paragraph 2 include the header social icons include the header button Home -> Edit (page) -> Edit Site Header -> Desktop Icon -> Link Spacing 1.5 2: site header to fit with the 'content width' of '89' as the rest of the site follows this as well (same as footer for example) ----- Other minor steps I'd love to figure out: 'over ons' page: have the picture of Marlies the women above the text on mobile (basically flip the 2 boxes in the section for mobile) across the whole site: I would love a 'back to top button' on the bottom right saying "^" (for mobile and desktop), I have no idea how. Is this a feature inside squarespace? Hope the description makes sense, if not please let me know so I can elaborate Thanks so much in advance, Kind regards Patrick de Waal