Search the Community

I have a button issue I have not been able to solve. On the home page there is a blue button called subscribe today. It functions like I want it to. Stays a solid color (blue) and the only change on hover is it outlines the box in white. The buttons on the pages (stock market dashboard & cryptocurrency dashboard) have a wiper effect in the section called "charts of Interest" at the bottom of the page that shows the button all in white when one hovers. How do I get these to act like the home page? I moved the links to the header for easy access. Website: www.MidnightInvestor.com Password: 123456$

I'm using some custom code to display filtered results. The first div is higher than the rest, though. Do you know what the problem could be??

Site URL: https://dropdolley.com Hey! I am seeking help to add two columns listing to my home page on mobile view. Currently, my mobile for the fan favorites section is only online one column. I know this is a css coding issue but the solutions I have found don't seem to work. What edits should I make to the code below for my HOME page (this code worked for my shop but not for mobile): @media only screen and (max-width:767px) { .products .list-grid { display: flex; flex-wrap: wrap; justify-content: space-between; } .products .grid-item { width: 48%; } }

Site URL: https://www.ccctv.org/ I want text blocks to have same width despite the window size (unless the window page is shorter than the text block width). How can i stop it from resizing or rescaling?

Site URL: https://dharmicliving.squarespace.com/ Hello! I am having issues with trying to create an offset floating navigation bar. I am using the below code which works perfectly on all pages except for the homepage, which is an index page. I want the offset margin to be present on all sides but currently the homepage is not viewing properly on the right hand side - see screenshot. Please help and thank you! pw : Dharma // Floating Header Bar // header { margin: 25px; } I am also using this code to create the background colour for the navigation... .Header { background-color: #f0efed !important; }

Site URL: https://granata-bio.squarespace.com/contact Does anyone know how I can move the form titles underneath the form field? https://granata-bio.squarespace.com/contact PW: BIO834

I have the below css code for a button. When the button is hovered it will outline the button in white. When I move the mouse off of hover, I get a bit of blue at the bottom of the button. How do I remove the blue at the bottom of the button? /* add to cart button */.sqs-add-to-cart-button:before { background-color: #000000 !important;}.sqs-add-to-cart-button:hover:before { border-color: #ffffff !important; background-color: #000000 !important; }.sqs-add-to-cart-button:hover .sqs-add-to-cart-button-inner { color: #ffffff; }

Site URL: https://www.juansolisphoto.com Hi, I need support to change the default header icon of non recognized social networks by css code. https://www.juansolisphoto.com (Brine template, v7.0) pw:holahola many thanks!

Hello, The buttons on pages (stock market dashboard & cryptocurrency dashboard) have a wiper effect in the section called "charts of Interest" at the bottom of the page. When you hover over the button, it will change to white. I would like for the buttons to function the same as the buttons at the top of the page (button is solid blue with white text, button remains solid blue with white text on hover but puts a white border around perimeter of button). I put the links temporarily up in the header for easy access. Website: www.MidnightInvestor.com Password: 123456$

Site URL: https://www.ccctv.org/ I want to align my text left like the green lines on the picture.Thank you

Site URL: https://calliope-calliope-fw7w.squarespace.com/config/help Hi I'm pretty new to css coding. I have changed fonts but am trying to add in a second logo to the left of my header as well as having one far right, does anyone have css code to be able to do this?

Currently, Squarespace only allows you to choose between 400 and 700 for the Montserrat typeface. When I use the CSS editor and type in "h1 {font-family: "Montserrat"; font-weight: 600;}, it either changes it to 700, or 400 if I put type in "500". How do I enable Squarespace to allow more font weights for Montserrat? Thanks!

Site URL: http://www.furkhaniqbal.com Hi, I wanted to add the following text "Digital Designer" beside the site title. However, I did not want it to appear on mobile (desktop only) and wanted it optimised so it maintains inline with the rest of the content? How could I do this?

Site URL: https://crow-manatee-3gjr.squarespace.com I'm trying to change the header font button in a new website. I've found some code on the forum which is working but I can't change it to bold. Can somebody help me out? The website is this one: https://crow-manatee-3gjr.squarespace.com Password: Dy<vPg?r&/^3B{9F I've used the following code: header#header a.btn { font-family: 'Roboto Condensed' font-weight: 700 !important; } Thanks!

Hello. Is there a custom css code to change the color of my PNG logo (which is black on main page and inverted on other pages) in navigation bar during hover effect? Thank you in advance! Sincerely, Ashley

Site URL: https://coconut-grasshopper-b736.squarespace.com/config/pages/632491ecd2457c0d3e60fa0e?p hi password : ginger kev i want to centre the footer text/social icons on mobile ONLY i sourced the following css code - but it does not work for ALL my footer..seems to work on social icons only...can you help? @media screen and (max-width:767px) { footer#footer-sections * { text-align: center !important; } } many thanks Kev

Site URL: https://www.prsnlhb.com/ Hi everyone, Does anyone know how customise / increase the weight size for buttons? Thank you!

Site URL: http://annauma.ca/home-iku Hello! I've gotten pretty much everything I need on my site now, and it works great on desktop! And on mobile for the most part, save for two things I'd like to solve: Make last nav menu a "button", and Add social icons but hide one + change logo I have this achieved on the desktop version. On the home page, you'll see one social icon hidden and one that says "IKU" - when you click on IKU, it takes you to the Inuktitut version of the site, and the original button is now hidden and a replacement "button" is there made from css code. On mobile, that replacement "button" is just a regular nav link and the social icons don't show up at all. English home page is annauma.ca password annauma IKU version is annauma.ca/home-iku Code for the social icon hide/replace logo that works on desktop: .icon[href*="http://annauma.ca/home"] svg { visibility:hidden; } .icon[href*="http://annauma.ca/home-iku"] svg { visibility:hidden; } .icon[href*="http://annauma.ca/home-iku"] { background-image: url(https://static1.squarespace.com/static/62227612c34bc74d480c8bc0/t/63310641bdd1660630c7494a/1664157249175/EN+%281%29.png); background-size: cover; background-repeat: no-repeat; transform:scale(1.25); } (vice versa for the English icon) And code for the "button" that works on desktop: .header-nav-item [href*="/donate-iku"] { color: #000000 !important; border-color: #faa524 !important; background: #faa524; border-width: 2px; border-style: solid; border-radius: 10px; -webkit-transition: 0.1s background-color linear, 0.1s color linear; -moz-transition: 0.1s background-color linear, 0.1s color linear; -o-transition: 0.1s background-color linear, 0.1s color linear; transition: 0.1s background-color linear, 0.1s color linear; font-family: 'BARLOW SEMIBOLD'; font-weight: 700; font-size: 16px; font-style: normal; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2em; padding: .86em 1.6032em !important; } nav.header-nav-list { align-items: center; } .header-nav-item--active a{background-image:none!important} /* Hide eng donate */ .btn[href*="/donate"] { display: none !important; } How might I use this for mobile too?

Site URL: https://pearler-cosmo-a.squarespace.com/?password=pearler https://pearler-cosmo-a.squarespace.com/?password=pearler For some reason, the header and footer isn't appearing on my cart page. I can't seem to figure out what code might be interfering here?

Site URL: http://www.jennharrington.com Hello, I'm trying to have my gallery pages span the full width of the browser. I'm on 7.0 and using the Charlotte template. It does appear to fill the full width on some small screens/when I reduce the size of the browser, but on my 27" monitor it's about 50% white space, and I'd like for the images to be full width regardless of screen/browser size. Attached you can see the amount of white space in different browser sizes. Is there any way to do it via CSS? It's not an option in the Site Styles page.

Site URL: http://differentkennedy.com Can't seem to find a thread that shows a CSS solution for left-aligning your site logo / title to stack over the navigation. I've seen plug-ins and paid options but was hoping for a simple css nudge. Goal is to essentially create a faux vertical navigation margin by taking the automatically right-aligned title [in this case "different kennedy"] and stack it above navigation on the left. Any help is much appreciated!

Site URL: https://fashionfilms.co.uk I have built a portfolio page as the home page for my new website https://fashionfilms.co.uk Each of the blocks is coded to give the interact I was after. The videos are iframes from Vimeo at 240p, the smallest I think I could use. I am happy with how it looks and love the quality of the videos vs gifs. BUT I am a bit concerned that the video heavy page is too slow to load and that it will be held against me in the SEO arms race. Attached is a screen grab from Pingdom. The page is 15mb and it takes 5.6 seconds to load. I understand the conventional wisdom is that I need to get this down to under 3 seconds. Which I guess could come from halving the page size. So my questions are Does it really matter? Does Google really penalise slower sites? I can imagine that my target audience- professionals, working in marketing on desktops, might be more patient than a doom scrolling consumer. So I am not overly worried about user experience but more about whether the site won't rank as well (other things being equal) as competitors. Is Vimeo the best video delivery platform for what I am doing? I can imagine that host the films on Squarespace maybe faster/ allow me to use smaller versions- but I am not sure I can code iframes for videos on Squarespace. Is there another way of making the videos smaller? How can I reduce the DNS lookups? Not even sure what that is. Would I be better off having a smaller landing page with a strong link to the portfolio? Any other thoughts on what I can do would be very welcome. Thanks S

Site URL: https://www.edelmannewyork.com/furniture/bronze-table Hi! I have hidden the add to cart button, and added in an enquire for order button using javascript, the enquire button only shows up after you reload the page and I am not sure why /*BRONZE CONSOLE TABLE hide add to cart*/ -- this is in the design CSS Section #item-5fe10bde29f160075137ee0e .sqs-add-to-cart-button-wrapper {display:none!important} this is in the page header code injection <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script> $(function() { $("<a class='checkoutbutton' href='/contact/'>Enquire for Order</a>").insertAfter(".ProductItem-details-share"); }); </script> <style> .checkoutbutton { font-family: tradegothic-bold; font-size: 12px; text-transform: uppercase; color: #fff; font-weight: normal; font-style: normal; text-align: center; text-decoration: none; padding: 14px; max-width: 200px; background-color: #070906; order:9; border:2px solid #070906; } .checkoutbutton:hover { color: #070906; background-color: #fff; } .sqs-add-to-cart-button{display:none !important} </style>

Site URL: https://marlow-concept-zach-naum.squarespace.com/optical-frames Hi there, I'm wondering if anyone can help me make a text block on the side of a page sticky? I have this block on the left side of the page which is functioning as a navigation bar with links to the text. I've styled the text block using CSS, and I would like to add CSS to make it sticky so that it stays in place as you scroll down the page. I've read quite a lot on how to do this (targeting the block then adding position: stick etc) but for some reason nothing I try seems to be working. Any help would be much appreciated!

Hi I have used the below custom code to change the banner size on the bedford template so it displays nicely on a ipad screen. However this also effects a pc with the display resolution size 1024X 768 is there any code I could use so it would just effect a ipad screen and not a pc screen? Thanks in advance for any help given. /* tablet top banner changing size to display better on tablets */ @media screen and (max-width:1112px) and (min-width:769px) { figure img { width: 100% !important; height: auto !important; left: 0 !important; } .banner-thumbnail-wrapper.has-description { height: 180px !important; } }