Search the Community

Site URL: https://www.sydneywaves.com Hi, I have added a download button and uploaded a pdf to be downloaded but when applied nothing happens when the button is pressed....I can’t figure out what is wrong.

Hi, When I open the site on my mobile phone, the Shop page looks terrible. Strange thing is that it doesn't display like this on the mobile view on Squarespace, just when I actually open it on my phone. 1. Products and buttons are on top of each other (see below) 2. Once I click to PRE-ORDER, the button copy goes back to "Add To Cart", and not PRE-ORDER Ideally for MOBILE, the products should be 1 per row and centered. I tried this code but it didn't work 😞 @media screen and (max-width:640px) { .ProductList-grid .ProductList-item { width: 100% !important; } .ProductList-grid .ProductList-item img { width: 100% !important; height: auto !important; top: 0 !important; left: 0 !important; } } Can anyone please help me? https://lustrelove.squarespace.com/shop boldbab& Thanks in advance, I really appreciate the support!

Site URL: http://www.teddyswims.com I want to move the enter site button to the bottom of the page for mobile, could someone help me with the coding to do so?

Site URL: https://www.ambiancecurator.com/ Hi there! I am trying to edit the mobile version of my website layout so that the Sign Up button is on the right side of where website visitors need to input their email address. Does anyone know how to do this? Attached a photo of what I'm referencing.

Site URL: https://bison-apricot-b8el.squarespace.com/ I'd like to ideally redirect OR remove the default "Join" button that appears on the Member Area access denied screen as only trade members will be granted access to create a member account. Have tried various code snippets to remove with no luck. Screenshot attached. To access the live page, this link should work: https://bison-apricot-b8el.squarespace.com/all-lighting-trade Any help would be appreciated. Thank you

Site URL: https://www.rando.report @tuan, I hoped this might be easy... I installed universal filter plugin. I'm using it to sort with tags. i have the tags looking similar to other buttons on my site. Hover color is correct, and the tags should be working with multiples enabled. But I can't figure out how to keep the hover color visible when the button is active, going back to regular background color when it is clicked a second time to deactivate. I also wanted this to apply to the tag buttons that show up on mobile in the filter overlay. https://www.rando.report/all-the-stuff Believe this is the css code I have shaping the tag filter buttons. I guess they are a customized version of my site's medium buttons, though maybe that was not really the proper way to do it. In any case, the hover color is defined here — can the active state be added in, or is this the wrong place for that? .medium-buttons { /* font size */ font-size: 12px !important; /* Button Text Color */ color: #fff !important; /* Glass tint/colour */ background-color: rgba(255,255,255,.1) !important; /* Corner rounding */ border-radius: 20px !important; /* Dropshadow */ box-shadow: 0px 5px 10px rgba(0,0,0,.6)!important; /* Hover transition speed */ transition: all 0.5s !important; &:hover { /* Glass tint/colour on hover */ opacity: 1 !important; background-color: rgba(222,0,255,.8) !important; /*button font color*/ color: #ffffff !important; /* border */ border-width: 0 !important } } Thanks for any help you may have, -daria

Site URL: http://www.studio-poise.com/new I believe I've identified the right code to alter the button to the color/style I would like. When I add it to the CSS editor, it changes it the right way on the WHOLE site. The problem I'm having is targeting ONE page of the index. I've tried using collection ID, I've tried using the URL slug #the-space-intro-section (using pacific template), I've tried even using the specific box identifier - nothing seems to work! I've successfully changed the heading colors for each section using the URL slug, but can't seem to get this to work... I'm trying to get the button color to match the h1 color for each section (3 different sub-brands on one page). Any help/guidance would be GREATLY appreciated. .medium-button-style-outline .sqs-block-button .sqs-block-button-element--medium {border-color: #b4c0b6; color: #b4c0b6 } .medium-button-style-outline .sqs-block-button .sqs-block-button-element--medium:hover {border-color: #b4c0b6; background-color: #b4c0b6 }

Site URL: https://www.thesoaresprotocol.com/ Hi guys! I just realized my buttons (donation, contact etc...) stopped working on mobile (Galaxy S21). They still work on the desktop. Any idea on what's wrong? Thank you guys!

Site URL: https://bugle-mandarin-klpp.squarespace.com/ Hello, I am new to CSS and am struggling to find an answer to this question. I have an image stack set up with a button, but no caption. I want to link the width size of the button to the width of the image in the block and have them scale together. I found a similar question on this forum where the code given was: but my button doesn't respond to that, even with the correct ID. I assume because I don't have a caption? Thank you!! ETA: Site password: buttons

Site URL: https://www.patrickpilato.ca/ Password: 123 Hi there, For some reason, when I view my "tools" page on mobile, only some of the buttons disappear. The buttons in the sections with a grey background with design "light bold" all have this in common. Can anyone help me figure out why this is? This is how the buttons should be: But some of them disappear on mobile view:

Site URL: https://www.valeriesimonelli.com/available-works/11 How do I add a "Purchase on Etsy" button (that links to my Etsy page) directly next to the "add to cart" button on all of my individual product pages? I would like the buttons to be identical.

Site URL: https://www.patrickpilato.ca/ Password: 123 Can someone please help me remove these 3 separate "learn more" buttons on mobile please?

Site URL: https://www.juliestamenic.com/ Hi all, Could anyone help me get a button "Discover newest photos" on my gallery page on the HOME page of my website https://www.juliestamenic.com/ Thanks a bunch! Julie

Site URL: https://www.circularitybv.nl/inloggen-voor-investeerders Hi, I am making a website where I have a login page for investors, after the password it shows two buttons, both are blue, but I want to put the emphasis on the top one, so I want to turn the bottom button grey. I got to the point where I can change the button style of medium to grey, but that changed all medium buttons on all pages. Anyone know where I can change coding per page? So I can sniff out where the color for that button is located and change the # to the color I want?

Hello, I'm a complete CSS beginner. I want to set the distance from the text in a buttonin Squarespace 7.1 . It should be much larger on the right than on the left. So that it looks like the text in the button is left-justified and there is a lot of free space on the right in the button. Can anybody help me?

Site URL: https://alexandrahall.squarespace.com Hey community! I am doing a project for a program I am in where we are asked to recreate a site that already exists. I chose: www.cascobotanicals.com I am trying to get the buttons to look like the ones on my inspo site. But it seems very tricky and confusing. My squarespace site is https://alexandrahall.squarespace.com and password is brineintopedro Any idea how to get the buttons to look somewhat like the ones on www.cascobotanicals.com ? I attached a photo of what they look like below. Thanks so much.

Site URL: https://typeAprofessionals.com Hi all, I have two large side-by-side buttons at the bottom of my home page, with a spacer on each side to make them more centered on the page. The buttons are the same width as each other and look fine in desktop and mobile view. However, in tablet view, the "order form" button is slightly narrower than the "file upload" button and it looks bad that they're not the same width. I believe button width in tablet view is being determined by their text labels, and "file upload" is one character longer than "order form." If I remove one letter from the "file upload" button, then they're the same width in tablet view. But obviously I want to keep the labels as is. I also noticed that if I remove the spacers, then they're the same width in tablet view, but I don't want to do this either because I like them more centered. I've searched the forum on this but haven't found a solution. If anyone can come up with one using CSS, it would be much appreciated! Thanks in advance!

Howdy. If I want to create "a hovering button" linked to my price or contact page when I'm scrolling thru my galleries how do I do that? Idea is that this button should hover always on a left side of the page when going thru my website.

Site URL: http://foxandvamp.squarespace.com/ Hi All Another questions from me please! I have a "Pay with..." Button I need to incorporate on a website. The developer tools for the finance company are a little vague as far as I can see. The code they've provided was the minimum to get the button onto the website, but there's no action actually linked with the button when you click it. When I try and any "onclick" action, it breaks the code for the presentation of the button. I've contacted them for assistance, but in the meantime, can anyone help here please?

Site URL: https://fscvideo.squarespace.com/ Hi! I'm testing a site and want the button on the first page of the index to be hidden and fade into appearance after 50s. The banner video will automatically replay and the button should then stay fixed on the page. I added some CSS to bump the button down lower on the page but when the page loads, it appears in its default position then drops to the bottom where I want it once the page loads. It doesn't look good. So I need help with that as well. //position button at bottom of page #block-yui_3_17_2_1_1617904209747_3948 { position: absolute; top: 150px; width: 100%; } Thanks all!

Site URL: https://ray-shallot-gz3z.squarespace.com/ Hi there - Im looking to have two buttons next to each other (right bound) on my site's global header. https://ray-shallot-gz3z.squarespace.com/ One that says apply one that says donate ... can someone help with css ? Where should I paste the code for changes to the header?

Site URL: https://www.meryangelo.com hi there, I am trying to get these three buttons side by side, is it possible to do? what css code should I use thank you in advance, Mery

Site URL: https://cliftoncreativeevents.com I have multiple shop pages but I don't want anyone to be able to purchase anything directly. So I hid the add to cart button and want to add a contact button which links to the form page. But is there a way to have that button pop up on all product pages without having to individually add it in?

Site URL: https://www.thesoaresprotocol.com/ Hi guys! So I set up a subscribe button on my homepage (created from a rss feed burner > follow.it). In my editor I was pleased to see that it would line up perfectly with my news blog button on its left. But when I check from a user standpoint the button box is slightly lower than the left button. Here is the code: <style> @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700'); .form-preview { display: block; margin-top: 30px; padding: 40px 50px 40px 50px; max-width: 350px; min-height: 200px; border-radius: 6px; box-shadow: 0 5px 25px rgba(34, 60, 47, 0.25); } .form-preview .preview-heading { width: 100%; } .form-preview .preview-input-field { margin-top: 20px; width: 100%; } .form-preview .preview-input-field input { width: 100%; height: 40px; border-radius: 6px; border: 2px solid #e9e8e8; background-color: #fff; outline: none; } .form-preview .preview-input-field input::placeholder, .form-preview .preview-input-field input { opacity: 0.5; color: #000; font-family: "Montserrat"; font-size: 14px; font-weight: 500; line-height: 20px; text-align: center; } .form-preview .preview-submit-button { margin-top: 10px; width: 100%; } .form-preview .preview-submit-button button { width: 100%; height: 40px; border: 0; border-radius: 6px; line-height: 0px; } .form-preview .preview-submit-button button:hover { cursor: pointer; } </style><form data-v-1ed4bb5e="" action="https://api.follow.it/subscription-form/Um9aUTI1ajA3UEZRSXN2aitJdU8rWCtWWDVlWHlqUU0wdERBRkJLL3Rnc1lmTWE3WVFndWxFbVErY01WRldDOUYxaVdMY2YwSE5INWo2akQ0NE5lcCtGaVk4MXJXOC93bFJ4Zm5UK2pZRHJFSnVEdkN5cHBHb0lITEI1cXV1dXB8TXFxcmozQ0hLYm0vSkJOUkJ3dWIrQ2E3OCswRnI1emhBYlNvNTVUYVVaaz0=/8" method="post"><div data-v-1ed4bb5e="" class="form-preview" style="background-color: rgb(255, 255, 255); border-style: solid; border-width: 1px; border-color: rgb(204, 204, 204); position: relative;"><div data-v-1ed4bb5e="" class="preview-heading"><h5 data-v-1ed4bb5e="" style="font-family: Montserrat; font-weight: bold; color: rgb(0, 0, 0); font-size: 16px; text-align: center;">Zoya. Subscribe to "News Blog"</h5></div> <div data-v-1ed4bb5e="" class="preview-input-field"><input data-v-1ed4bb5e="" type="email" name="email" placeholder="Enter your email" spellcheck="false"></div> <div data-v-1ed4bb5e="" class="preview-submit-button"><button data-v-1ed4bb5e="" type="submit" style="font-family: Montserrat; font-weight: bold; color: rgb(255, 255, 255); font-size: 16px; text-align: center; background-color: rgb(0, 0, 0);">Subscribe</button></div></div></form> I would like to simply correct that small gap and have both lined up correctly (the mobile view isn't an issue since everything appears vertically). I looked at code online but still new to coding. Thank you for your help!

Site URL: https://www.originalworksofartinc.org/registration I'm just trying to create secondary button colors and styling on these pages. I understand that I can create different colors for different sections but within a section I might want the CTA to stand out from other buttons. For example, on this page (https://www.originalworksofartinc.org/registration) I want the "Learn About the Program" to be the main CTA but the "Learn about the Instructor" to be a secondary option that's an outline button or just a different color. Similarly, I'd like to do the same with the "Apply for..." buttons below. I keep trying CSS that it says has errors but it never specifies where so I can't be clear on what to fix. SOMEONE has to have figured this out. Thanks in advance.