Search the Community

I've seen variants of this question asked on this forum, and tried many of the proposed solutions but am still having no luck on the Avenue Template for Squarespace 7.0. I was trying to use some 7.1 templates but it seems like they removed quite a bit of the Title / Description functionality for galleries? Here's my particular situation: I have roughly 130 images (each image is a different character illustration). I would like to upload and display all of these images to a single landing page, using a single, clean Grid Gallery. Each image has a unique Title (the character's name) and a unique Description (a brief character background, just a few lines), which are added to their respective fields of the Image Settings. I would like for users to be able to hover over a character, and be able to read the Title + Description text displayed over a 90% white overlay on the image. It would be ideal if I could have the text formatting dictated by my Header / Paragraph settings. I'm looking for Custom CSS to help solve this issue. Any advice? I'm also not beyond alternate solutions or templates, if it seems I'm missing an obvious / easy thing here. -- Additionally, these 130 images (characters) each fall into a category (Good, Bad, Neutral, etc.) as well as some tags (location, traits, etc.). What would be the best way to allow users to look at the Gallery Grid of 130 images, but quickly filter to just see, for example, the Good character category? Is that a doable task, or would I have to create unique Gallery Grids for each Category and then create new pages / drop-down items for each? Any help is massively appreciated. These forums have been so helpful over the years—thanks all.

Site URL: https://sparkotechengineering.squarespace.com/ Help Please! I want to make the drop down of my categories have some space or borders. Tried to code it but i can't make it work.

I am looking for a way to force summary blocks to display 3 thumbnails per row along with their excerpt for mobile screens. Does someone know how to accomplish this? I have the summary block on the page below: https://www.dothingsnyc.com/journal Thanks, Josh

Site URL: http://www.goedland.nl Hi all! I'm looking for a way to hide the mobile hambuger menu on a few specific pages of my website.. How do I best do this? In my Custom CSS I've added the following code on the pages I needed to hide the main navigation & footer. In this I have succeeded, but the hamburger on mobile remains... Also is there an easier way to hide the main nav and footer than what I've used now? Thanks in advance! #collection-5ea43d4d14bd4f0e74ba7e12 .Header-nav { display: none!important; } #collection-5ea43d4d14bd4f0e74ba7e12 .Footer { display: none!important; } #collection-5ea442813c53f87600534627 .Header-nav { display: none!important; } #collection-5ea442813c53f87600534627 .Footer { display: none!important; } #collection-5ea442b5f222897b8d590132 .Header-nav { display: none!important; } #collection-5ea442b5f222897b8d590132 .Footer { display: none!important; } #collection-5ea442c7a9fa910a7d7f11b2 .Header-nav { display: none!important; } #collection-5ea442c7a9fa910a7d7f11b2 .Footer { display: none!important; } #collection-5ea442c28315084d6dba2579 .Header-nav { display: none!important; } #collection-5ea442c28315084d6dba2579 .Footer { display: none!important; } #collection-5ea442cebe3c470ba754c787 .Header-nav { display: none!important; } #collection-5ea442cebe3c470ba754c787 .Footer { display: none!important; } #collection-5ea442bbb1653635c3af81f4 .Header-nav { display: none!important; } #collection-5ea442bbb1653635c3af81f4 .Footer { display: none!important; } #collection-5ea442af1d0fc8570b270cfe .Header-nav { display: none!important; } #collection-5ea442af1d0fc8570b270cfe .Footer { display: none!important; } #collection-5ea44341397d8072ce4662c6 .Header-nav { display: none!important; } #collection-5ea44341397d8072ce4662c6 .Footer { display: none!important; } #collection-5ea443362fec9937a4430f10 .Header-nav { display: none!important; } #collection-5ea443362fec9937a4430f10 .Footer { display: none!important; } #collection-5ea4433b00047c5743af480b .Header-nav { display: none!important; } #collection-5ea4433b00047c5743af480b .Footer { display: none!important; } #collection-5ea44325ee86164fffff2b3e .Header-nav { display: none!important; } #collection-5ea44325ee86164fffff2b3e .Footer { display: none!important; } #collection-5ea4432b397d8072ce466142 .Header-nav { display: none!important; } #collection-5ea4432b397d8072ce466142 .Footer { display: none!important; } #collection-5ea4433089503f2e48088ef6 .Header-nav { display: none!important; } #collection-5ea4433089503f2e48088ef6 .Footer { display: none!important; } #collection-5ea443878315084d6dba3c03 .Header-nav { display: none!important; } #collection-5ea443878315084d6dba3c03 .Footer { display: none!important; } #collection-5ea4437de702471b5a2a30f4 .Header-nav { display: none!important; } #collection-5ea4437de702471b5a2a30f4 .Footer { display: none!important; } #collection-5ea442a78315084d6dba22b4 .Header-nav { display: none!important; } #collection-5ea442a78315084d6dba22b4 .Footer { display: none!important; }

I want to ad text in the bottom of the page via code. What would that script look like? not the footer

Hi there, I have uploaded custom fonts via CSS and assigned them appropriately to where Id like them, however, now my image blocking text won't allow me to use the 3 custom fonts. Particullary in the paragraph section. Ive attached a picture. Where it says Dream Team, id like it to be in my heading 2 font but when I change it it also automatically changed the text below it. Can anyone help? Is there a glitch in my code?

Site URL: http://artkartavtsov.com/new-gallery I'm tried to change color of left/right arrows, but it turn up too hard for my knowledge of css. And I also want to get the arrows more visible with scaling them more or making them bold of both. Is it possible? Thanks for any help!

Site URL: https://www.decarbonista.world/challenge Hi all, I'm looking to add a semi-transparent background color to the content blocks (or at least the text blocks) in a Cover Page layout for a client. Website is: https://www.decarbonista.world/challenge I've pasted in the code in the header of the Cover Page, but it doesn't seem to be working. Code below. Not sure what I'm doing wrong? <style> #yui_3_17_2_1_1593622491163_415 { background-color: rgba(0, 0, 0, 0.5); padding: 30px; } </style> Thanks! -Scott

Site URL: https://www.markhilton.me Hello, I am curious as how to change the color of the margin padding on my site which uses the Jasper template. I can't seem to find the option in Design > Site styles. I would like to make the margin padding a light grey for focus the reader's eyes on the actual content and provide definition. I have picked out a color to use with a hex code, so if someone could provide the appropriate CSS code, I would appreciate it.

Site URL: https://www.thirstforallah.com/en/home/resources/articles Hey all, I'm trying to replace the magnifying glass in a search bar with the logo from my site. I believe I successfully did it, but am not sure how to align it and resize appropriately. The following is my css code: .sqs-search-ui-button-wrapper.color-light .search-input { background-image: url(https://static1.squarespace.com/static/5e8b6752beaf194f7c179f65/t/5efb7d7fcbb31971d517acb1/1593539974063/TFALogoclearico.png); color: #f7f7f7; border: 1px solid #eee; } Any ideas? You can see what I'm talking about here: https://www.thirstforallah.com/en/home/resources/articles Thanks!

Site URL: https://www.thirstforallah.com Hey all, I recently purchased a plugin from squarestud.io and have been having trouble getting support regarding a plugin that causes my navigation links in the header to be underlined upon hover. See Nav Header One - CLICK HERE. This is currently only working on safari and does not work in chrome on my mac, but does work on my mobile in chrome. Any particular insight into what could be changed in the coding that could solve this problem? //Navigation underscore - squarestud.io// nav a:hover { background-size: 100% 0.5px !important; } nav a { padding-bottom: 6px; overflow: visible !important; background-repeat: no-repeat !important; background-image: linear-gradient(to right,currentColor 100%,currentColor 0) !important; background-size: 0% 0.5px !important; background-position: 0% 100% !important; white-space: initial; transition: all ease-in-out 500ms !important; -ms-transition: all ease-in-out 500ms !important; -moz-transition: all ease-in-out 500ms !important; -webkit-transition: all ease-in-out 500ms !important; } //End navigation underscore// Additionally, if you are feeling particularly generous, on mobile the underline surpasses the boundary of the link and goes across the whole screen. See below. Really grateful for the help i've received thus far on this forum. Thanks for your help!

Site URL: https://pigeon-orange-s7hm.squarespace.com/prints Hi, I have a store: https://pigeon-orange-s7hm.squarespace.com/prints PW: Suzi I have 6 prints. Like the store, but not the individual pages. The top 3 images are portrait photos so because I have set the formatting to Square it cuts off the photo. I need the top 3 images in their individual pages to be portrait and the bottom 3 images to be square. i.e these individual pages need to be changed to portrait: https://pigeon-orange-s7hm.squarespace.com/prints/coastal-hues https://pigeon-orange-s7hm.squarespace.com/prints/coastal-kangaroo https://pigeon-orange-s7hm.squarespace.com/prints/through-the-trees-inverloch All of the others Square (as currently set up). Can this be amended with CSS? Thanks,

Site URL: http://www.jeffkrueger.net How do you change just the color of the background on the shopping cart page in 7.1 to white?

Site URL: https://www.oneandjune.com Does anyone know how to increase the padding of the blog post section. For my main page, I would like the main section and the blog to align. I've been trying to find a way to increase the padding only for the blog post section but I've been unsuccessful. I also like to remove the image block on the left but I can't seem to do so. Any help would be greatly appreciated! Thank you!

Site URL: https://mollyrees.com Hi! Carousel doesn't have a lightbox option, and I've been searching endlessly for custom CSS to create this option. Is it possible? I heard that it's an option in the Forte template, but haven't seen what that looks like. I have several Carousel galleries on a page and would like the viewer to click through larger images if possible. Even if a lightbox weren't an option, I'd be happy if there were a hover or roll-over effect where hovering over a photo enlarged it temporarily. Kind of like the "genie effect" option on a mac computer when you roll your mouse over the dock. Any way really for the images to become larger if the viewer would like to look at them more carefully! Thanks in advance for any help. My website is mollyrees.com, the page with the carousel galleries is "Editorial" which is a tab under "Photography". I have the page password set to: help!

Site URL: https://hawaiiumamicrisps.com/ Hi there, My mobile view of the top image doesn't show in 100% sizing. My CSS was this: @media screen and (max-width:792px) { [data-section-id="5eb9f02baee89f3e0efd2501"] { min-height: 60vh !important; } } Still not working so could you please help me to advice any additional code? Thanks. PASSWORD for website: UMAI I

Site URL: https://www.newworldangels.com/about I have a form and am trying to place two fields next to each other. Both are checkbox lists. I tried the code given for a related question and changed the field object from email to checkbox, but it didn't work. Any suggestions?

Site URL: https://piccolo-oleander-tf9j.squarespace.com/cover Hi guys, I'm trying to use the cover pages to display a bloc of text next to an image, but I'd really need to have 2 simple fixed buttons to go to the previous/next page (easy href in html). I'd love to have them positioned in the bottom left and right corner, but for some reasons, the code injected in the URL only appears during the loading part of the page : after that, it simply disappears. Do you guys have any idea how I could make it work ? Thanks a lot in advance ! https://piccolo-oleander-tf9j.squarespace.com/cover PW: 1234

Site URL: http://www.brandyglows.com Hello, friends! I'm on 7.0 using the Brine template. I am helping my wife with some custom CSS for the navigation menu on her SquareSpace site. I've implemented a caret-style dropdown menu, and I have figured out the styles for a sticky header. Here's the problem. In order to get the mega menu working, I first styled the dropdown section using `position: fixed` as follows: /* Style mega menu */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder { outline: 1px solid purple visibility: hidden; margin: 0; height: auto; width: 100vw; position: fixed; top: 9.5rem; left: 0; letter-spacing: 0; line-height: 1.5rem; box-shadow: inset .05rem .05rem .15rem .015rem rgba(0, 0, 0, 0.075); } /* Reveal mega menu on hover */ .Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2):hover .Header-nav-folder { visibility: visible; } Note about the below property: I used this strictly for diagnostic purposes. `outline: 1px solid purple` Here is the styling on the navbar: /* Sticky header */ .Header.Header--bottom { position: sticky; position: -webkit-sticky; top: 0; height: 3.5rem !important; z-index: 999 !important; background-color: #FFF; box-shadow: 0 0 .1rem .05rem rgba(0, 0, 0, 0.15); } The dropdown worked well before the navbar was `sticky`, but now it is out of position when the user scrolls down, which makes sense. Where the real headache comes in is when I tried to change it to `position: absolute` in an effort to keep it close to the navbar. When I do this, the element scales on resize, and rather than remain full width, it leaves a gap on one side despite setting `width: 100vw`. I know this is probably a noob thing, but I am racking my brain to figure out what to do. Site — http://www.brandyglows.com Password — 'temp' If anyone could have a look and offer a tip, I would be hugely grateful.

What is the CSS to edit a quote block? I want to be able to change text font, size, style, weight, color, etc.

Site URL: https://helloluci.com/helloluciblog/self-care-during-quarantine Hi All! I'm working on some blog post that interview people, and I current have the desktop view set up as 'image right, text left' then 'text right, image left' on the next line, and so on. In mobile view, I'd like for the images to stack on top of the quotes. I have tried the following CSS which was given to me by a more advanced user, but it didn't work. I'm not really sure where to go from there. I've linked the blog post for reference! @media screen and (max-width: 640px) { .Main-content .code-block + .sqs-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } Thank you!

Site URL: http://www.get-ripe.com Hi Friends, Thanks in advance for any support. I'm struggling trying to resize the banner sizes for my website www.get-ripe.com in CSS. Any help would be greatly appreciated. I'm looking to resize the banner on all pages except for the Digital Sessions & Blog page. Again, I appreciate you! Have a great weekend! Megan

Site URL: https://www.grahamweaver.com/blog/the-common-question On individual blog pages, I added code to make the text for previous and subsequent blog titles (basically the pagination at bottom of each blog post) change colors to our accent blue when the mouse hovers over the titles. It appears to be working just fine when the Custom CSS window is open, but for some reason the hover effect stops working after I close the CSS window on the left menu. See screen grabs for reference. All of my other code is working just fine. Any idea what the issue is here? Is it my code, or is it Squarespace? Would appreciate insight on how to fix! Thank you!! URL: https://www.grahamweaver.com/blog/the-common-question PW: W3av3

Site URL: http://s15.squarespace.com Hey everyone! Can you help? I'd like to add two extra links to my header bar, next to my site logo. (NB: While my main navigation hamburger bar remains put on the right.) Just like www.dropbox.com (see attached screenshot showing the two links "For Teams" and "For Individuals" next to the logo.) I attach my current layout, as well as a "Design Mockup" showing the two links I'd like to add ("For Kids" and "For Adults"), with the one link faded to show that it's the active page. Thank you so much!

Site URL: http://www.frotteedimare.ch/test-info Hi all! Please check the gallery carousel on the very bottom of the page. Im trying to set it to a fixed height so that there is no resizing of the images when resizing the browser window. Cant figure out how to target it. Any help would be appreciated very much! Thank you. Jan