Search the Community

Site URL: https://grantpeters.xyz Hi all, I'm wanting to get the titles of my projects to change from black to white when a mouse is hovered over them. See "collections" on my site for said titles. Password is: workinprogress Also, how can I align these project titles to the left of screen while keeping the centre alignment of the title on the unlinked page "Splash"? Every time I align the collection titles to the left, it takes the other page's title too. Thank you

Site URL: https://brandonhuntonline.com/ Question: I'm using flexbox (for the first time, and mostly LOVING it!) but am having the issue of my navigation covering my image on the right. How do I get the navigation to not cover any of my sections? (This also happens when I scroll back to a previous anchor link from the bottom. The top part is hidden under the navigation.) PW: Gamer My CSS: // anchor links - smooth scroll effect html { scroll-behavior: smooth;} //-- Change Button Hover Color .btn:hover {background-color: grey!important; color:#000} .sqs-block-button-element:hover {background-color:grey; color:#000} //-- No Underline Links header a { background-image: none !important; } footer a { text-decoration: none !important; } //-- 50% Split Sections WITH CONTENT IN BOTH .sections { display: flex; flex-wrap: wrap; .page-section { width: 100%; .content-wrapper { box-sizing: border-box!important; }} [data-current-styles*='"customContentWidth": 30'] { width: 30%!important; .content {width: 100%!important;} } [data-current-styles*='"customContentWidth": 70'] { width: 70%!important; .content {width: 100%!important;} } [data-current-styles*='"customContentWidth": 51'] { width: 50%!important; .content {width: 100%!important;} } [data-current-styles*='"customContentWidth": 33'] { width: 33.33%!important; .content {width: 100%!important;} } @media screen and (max-width: 800px) { #siteWrapper & section.page-section {width: 100%!important;} } } //-- Floating Social Links @media only screen and (min-width:640px){ footer{ .sqs-svg-icon--wrapper{ display: block !important; margin: 20px 10px !important; } .socialaccountlinks-v2-block{ position: fixed !important; top: 30% !important; /* Adjust this percentage to move the icons up or down */ right: 5px !important; z-index: 99 !important; } } } /*===Full width Instagram ===*/ section[data-section-id="61a40048e0deb77695c8bf7a"] { min-height: initial!important; .content-wrapper { padding: 0!important; max-width: 100%; } .sqs-row .sqs-block.instagram-block{ padding: 0!important; .sqs-video-wrapper.video-fill { position:relative; } } .sqs-layout > .sqs-row { margin: 0!important; } }

Hello everyone, I would like to change the position of the product images inside the product page and make it full (without paddings). Here in attachment an example. The website is: https://auri-template.squarespace.com/shop-v1/p/country-feast-set-wc7zy-egssa PSW: demo Hope someone can help me with the right CSS, Thank you very much in advance!

Site URL: https://horse-grouse-s87d.squarespace.com/ Hi! I'd like my first sections to sit at the top of the page's margin instead of underneath the site header. The site header is fixed, transparent and only has a logo centrally aligned. (See image attached) Can somebody help? Thanks, Charlie

Site URL: http://www.frankmeuschke.com Hi. Looking for help with CSS injection to change position of the image title in Wells 7.0 Gallery Page. It appears to be either on the left sidebar when large or overlapping image when medium size. I'd really like it to be 1.5 lines beneath the image, left side and stick with that placement regardless of browser window size. I've used this forum to find code to inject to change the font size of the image title (great, thanks!), but I see it is still the same in mobile (thick font -darn ugly) and I'd like that to be the same lightweight (normal?) font as on the desktop version. Thank you. Attached are some page examples of the image title location problem and the mobile version thick font. www.frankmeuschke.com

Site URL: https://www.caminodelvino.co.uk Site: https://caminodelvino.co.uk I was wondering how I would be able to centre my logo like they do in this site : https://harlow.showit.site/. Really not a fan of how Squarespace bunches and constricts the position of the tabs. Equally, if anybody knows how to elongate the this 'line' the tabs are on, so that they align on the same line together (sitting below my logo) then that would be great too! Any help would be amazing and thank you 🙂

Site URL: https://nick-mendillo-design.squarespace.com/contact PW: Carson123@ I can't believe the Tik Tok icon still isn't an option in social link blocks (anyone know when that's getting updated?) but in the meantime, I'm trying to swap out the standard link icon via CSS with a tik tok icon. I've done this before but for some reason can't get it to work today. The social links appear in the site-wide footer as well as on the contact page. Can anyone help me out? Thanks!

Site URL: https://www.descoverhome.com I am trying to create a navigation bar that sticks below the header when scrolling on both mobile and desktop. I've found a workaround that uses the announcement bar and switching the location to below the logo header, but I'd still like to use the announcement bar for actual announcements. I've attached an image. I'd like this whole section to be fixed to the top at all times to allow for easy navigation around the site. Thanks in advance for your help! pw: 123456

Site URL: https://aargo-environmental-tools.squarespace.com/ On the home page I created a simple list. Then turned on the Card style. Is there a way to set these "cards" to be the same size? The column size is good. The vertical changes based on the amount of text and I'd like to set it to a card with the larger size, so less text will result in the same card size with some space between the text and the button. See screen grab. Site password is - thrive Thank you, Scott

Site URL: https://www.joshuaschweigert.com/ Hello, I'm trying to get the same styled sticky table of contents that appear on my pages to have the same functionality on posts. I can't seem to figure out why I'm not getting the same result when I use the target ID. Page Where It Works: https://www.joshuaschweigert.com/about-me Post Where It Doesn't Work: https://www.joshuaschweigert.com/about-me Would greatly appreciate some assistance, thank you! Warm Regards, Joshua Schweigert

Site URL: https://doceproductora.com i'm trying to disable mobile responsive design for my website. My website URL is: https://doceproductora.com

Site URL: https://www.palnikstudios.com www.palnikstudios.com. password: yes Hiya 🙂 I keep trying various ways to target my shopping cart page but nothing works... I'd like to simply give it side borders that match the rest of my site. I'm also trying to edit the color of the button on hover. #cart doesn't work and #cart-body: doesn't either.

Site URL: https://defendingabuse.com/ I apologize if the title is confusing, I'm not sure how else to word it. I am trying to create a half background with an opacity of ~.5 to insert some text into. I need the background to go in front of the background photo that I have, obviously. I have provided an example of exactly what I am talking about below. I use CSS background properties relatively often but I am still a noob and every time I have tried it will not work. The photo below is my site with what I have so far. I made it red so its easy. Here is the current code: section[data-section-id="618a8d101b196313d7d86ae0"]{ .section-background{ background-color: red; padding-left: 50%; } } When I try and add opacity, it affects the entire section. I only want it to affect the red half! Please help!

Site URL: https://www.suziappelphoto.com.au Hi, Can I use CSS to set the colour for the announcement bar? I want the background to be the same as the Header but with a white font colour not how it currently is. This is in 7.1 and I cannot find where to customise it. Thanks, Leanne

Site URL: http://www.surmountpictures.com/clients I am trying to centre the portfolio grid blocks to create a better looking web page with an uneven amount of portfolio grid elements. I would like for the last row (since they are rows of 3) to be centred because it doesn't have enough What CSS or coding can I add to centre align the portfolio blocks?

Site URL: https://encore-refresh.squarespace.com/shop/reduced Hello For some reason my Sold Out sticker is different sizes depending on the product title on category pages (see attached graphic). I have a bit of custom CSS for styling but even with that removed the text ("Sold Out") sometimes breaks into two lines and sometimes it doesn't. I can hack about CSS to get stuff to do what I want most of the time in Squarespace but this layout seems to be using flexbox which I just can't get my head around with regards to how to force my sticker to be the same size on every product. I've tried all manner of CSS things on the sticker itself but nothing seems to work. I want it to break into two lines for all products. Thanks in advance https://encore-refresh.squarespace.com/shop/reduced Password: golfballs

Site URL: https://www.arirosenfield.com Hi My client wants all 3 blocks to be even on desktop - so even though on some screens they are even, on most because of the dynamic nature they squish and are uneven what I want to do is -reduce the padding of the newsletter block on the top so its even with the rest -make sure the newsletter button is alright to the right of the sign up, and reduce the width of both of those blocks so they sit next to each other -reduce the padding at the bottom of the newsletter block -make sure they sit next to each other on an even line on desktop Can someone help me with this?

hi there, I'm trying to upload an image on a gallery grid that is only on gallery not on other backgrounds. is this possible? thank you so much

Site URL: https://www.australianwildlifehealthinstitute.org Hi there, I have two individual text boxes on my home page which I'm trying to center as if it were one div? My best guess is containers /flex, but I can't figure out the correct code to make this happen. I've been trying to figure this out for the last few hours now and can't for the life of me figure out why it's behaving like it is! As an aside, when you currently resize the window the text with the green background doesn't wrap/move underneath when there isn't enough space. Instead it overlaps the AWHII, which I believe has something to do with the fix width sizes? pw: awh11

Site URL: https://uk.thenueco.com/pages/survey Hi Does anyone know if it's possible to have customs buttons like the below example? https://uk.thenueco.com/pages/survey Thanks

Site URL: https://www.michalgrzymski.com Hi everyone! I have a problem - my custom font Inter is showing only on desktop (all browsers) and not on mobile. I have read many threads on this forum and nothing helped. My website address is michalgrzymski.com The Inter font is used for everything except the body text. Any idea what to do? 😇 Custom CSS code: @font-face { font-family: 'Inter'; src: url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bfcd7e554019945eb90/1642626044252/Inter.woff2') format('woff2'), /* Super Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e87bf767faf14f2c0711d3/1642626039316/Inter.woff') format('woff'), /* Pretty Modern Browsers */ url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e8932f1e9b475edc6664af/1642631984266/Inter.eot'), url('https://static1.squarespace.com/static/5d4b2a03a0186000010f5622/t/61e832a0060c2d3f4ea7fc5e/1642607266623/Inter.ttf') format('truetype'), /* Safari, Android, iOS */; } .sqs-block-image .design-layout-collage .image-title p { font-family: 'Inter';} .sqs-block-image .design-layout-collage .image-subtitle p{ font-family: 'Yantramanav';} h1 { font-family: 'Inter'; font-weight: 700; font-style: bold; font-size: 72px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h2 { font-family: 'Inter'; font-weight: 450; font-style: Regular; font-size: 33px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } h3 { font-family: 'Inter'; font-weight: 400; font-style: Regular; font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1em } body { font-family: 'Yantramanav'; font-weight: 400; font-style: Normal; font-size: 16px; letter-spacing: 0em; text-transform: None; line-height: 2em } .sqs-block-button .sqs-block-button-element { font-family: 'Inter'; } .sqs-block-image .image-block-outer-wrapper.design-layout-collage .image-button-wrapper .image-button a { font-family: 'Inter'; } .Header-nav { font-family: 'Inter'; } .has-site-title .Header-branding{ font-family: 'Inter'; }

Site URL: https://dogfish-rhubarb-3kts.squarespace.com/ I am having a similar problem with change showing when the CSS editor is live, but not on the actual page. I am trying to customize a button so it is just text, no outline or background, and no background color on hover or click. It works great when the editor is live but otherwise it still flashes a white background on hover/click: This is the code I have added to the Design/Custom CSS editor: .sqs-block-button .sqs-block-button-element--large { border: 0; color: black; } .sqs-block-button .sqs-block-button-element--large:hover { background-color: #ffffff00!important; opacity: 1 !important; color: #fefefe !important; } .sqs-block-button .sqs-block-button-element--large { padding: 4rem !important; } If anyone could advise what I did wrong I would really appreciate it. If it helps to check it out on the site you can check it out here. The very first section has one of the buttons with the issue ("Oculus Quest 2"). https://dogfish-rhubarb-3kts.squarespace.com/ password: havealook Thanks! Brett

Hello, I am trying to create inline images that have text when you hover over them but I can't find any css to remove the grey box on the text, is this possible? thank you

Site URL: https://mokshatransformation.squarespace.com/ Hello there, I am using the below code to create an underline effect on my main navigation.... (site password is: Moksha) // Center Nav Line // @media all and (min-width:770px){ header nav a{ display: inline-block; float: none; } header nav a:hover:after{ transform: scaleX(1); } header nav a:after { display:block; content: ''; border-bottom: solid 1px #cda05a; padding: .4em; transform: scaleX(0); transition: transform 250ms ease-in-out; z-index: 999; } } It works great until you get to the page titles within a folder. The width of this underline appears wider than the wording. Is there a way for this to be corrected? Just so the underline width is the same width as per the wording. Many thanks in advance for any help.

Site URL: https://www.pappishop.com/ Hello! I need your help ASAP. On the homepage of my website, I have a banner slideshow, and the images look good on the computer version, but on the mobile version my images get cropped. How can I fix this? Is there a custom CSS I can use to fix the mobile version? Thank you!!