Search the Community
Showing results for tags 'custom-css'.
-
Adding 2 logos into the Navigation Header Squarespace 7.1
Angelique posted a question in Coding and Customization
Site URL: https://icosahedron-recorder-88b2.squarespace.com/ Hi, I am trying to add a logo on the left and on the right of the navigation, but I am unsure as to how to code it. Also, is there a way to make all the menu options appear in line instead of wrapping? Site password: wSrNEW!2021 -
Hi Guys, I am using a centred navigation (logo on the left, contact button on the right and menu items in the middle). Is there a way to prevent the navigation items from stacking as shown in this screen shot? Any help is greatly appreciated! I have researched options however havent been able to get anything to work. I'm using SquareSpace 7.1. Thanks!
-
Site URL: https://www.drangelabrooks.com Hi all, I added a custom font to a website I built, following instructions online with the following code: @font-face { font-family: 'font-name'; src: url(https://static1.squarespace.com/static/60c04bccb3eb927f554f9eeb/t/60cec441871e18034ea73d58/1624163393990/Corinthiago.otf) } h2 { font-family: 'corinthiago', Balboa Plus Inline; } ...but it only loads properly on my laptop. On my phone and other devices the font that loads in place of the Corinthiago is some bland font that I haven't used anywhere else in the design. The default font I have is a squarespace one--Balboa Plus Inline, but that one doesn't load in place of the Corinthiago. I don't know a lot about coding--would anyone be able to help me troubleshoot this? In the meantime I've just removed the custom CSS so that Balboa Plus Inline is all that loads, but that's not my client's preference. Thanks for your help!
-
Site URL: https://www.redmondfunding.com/ For some reason the SVG links for this website aren't showing up on the live site but showing on the editor. It's the arrows on the right side of the accordion. on this page: https://redmond-funding-group.squarespace.com/loan-programs pw: redmond I just need another set of eyes on this. I think that it might be because I'm using a :after pseudo class but why would that be a problem?
-
Site URL: http://greenpointsoftball.com/sample-page Hey there! I'm trying to rebuild a sports league website and we just need to be able to add in a table or something like it that would have a league schedule and another for the league standings. I have been Googling this for hours and cannot find any helpful results. Does anyone know of any good plugins for tables or work arounds to make it look similar to this? Thanks so much! -
Banner Image Won't Resize for Mobile View
TheIDBootCamp posted a question in Coding and Customization
Hello, Our banner artwork appears fine on our site when viewing on a computer screen, but the mobile view does not resize the banner and cuts off the bulk the image versus resizing for the mobil platform. Any tips on why this is happening, and how resolve it? We've found that the majority of site visitors use mobile, and don't want to reduce the impact of the image. Thanks in advance. -
Site URL: https://www.goldenllamaproductions.com/commercial Hello! I'm looking for a way to achieve a banner image that has a play button that can be clicked into a Vimeo video like this: https://www.tylerkalberg.com/featured-multicare Also, how to create the aesthetic of this full screen image with small font that clicks through to a page: https://www.tylerkalberg.com/featured
-
Site URL: https://www.mmelo.ca/work I want the pictures in my work page to scale up and have the caption with a black overlay to appear on top when hovering over each picture. I have gotten the caption and overlay to work, but when I tried adding the code to scale the photos up, the photos do in fact scale, however it scales out of its frame. As you can see below, I tried adding overflow: hidden to counteract that, but it doesn't seem to do anything. Any help would be appreciated, thanks! This is the code I used: .gallery-caption { position: absolute; top: 0; left: 0; background: rgba(0,0,0,0.4); /* overlay color */ height: 100%; max-width: unset; padding: 0; opacity: 0; } .gallery-caption-wrapper { display: flex; align-items: flex-end; /* center vertically */ justify-content: left; /* center */ } .gallery-caption-content { font-size: 1rem !important; /* caption font size */ color: white; /*caption font color */ padding: 0px 0px 20px 30px; } .gallery-grid-item:hover .gallery-caption { opacity: 1; } .gallery-grid-item:hover { transform: scale(1.1); width: 100%; height: 100%; overflow:hidden!important; } .gallery-grid-item { overflow:hidden!important; position: relative; } .gallery-caption-grid-simple { transition-delay: 0ms; } -
Transparent Mobile Navigation on Brine Template
alwalt posted a question in Coding and Customization
Site URL: https://lizard-chartreuse-ftf8.squarespace.com/ Hello community! https://lizard-chartreuse-ftf8.squarespace.com/ Password: solar2020 Trying to make the mobile menu overlay over the background image the same as it does on the desktop view. I found a bunch of code on the answers forum, but nothing is working for my site... Thanks in advance. -
Site URL: https://atelierwit.com Hii! I've tried everything in the book but I am getting so frustrated with SS's responsive design, I basically just want my website to be displayed on the mobile version the same as it is on the desktop version. I already applied this code to make the background header appear smaller on mobile but it doesn't look that great because the text underneath is now is huge compared to the image. /* mobile-top banner */ @media screen and (max-width:767px) { body.homepage article section:first-child { min-height: unset !important; height: 43vh; } } Also I really want galleries in the original form (less height and more images displayed), text / image blocks to appear next to each other like I designed it with the desktop site and my product pages to not stack underneath each other but have at least 2 columns. If it's not possible, any other tips to achieve the look that I want with the 3 main problems I have would be so helpfull aswell! Thanks in advance 💗💗💗💗 -
Problems with responsive image resizing
accidentalhannah posted a question in Coding and Customization
Site URL: https://apricot-minnow-acst.squarespace.com/member-areas-4 Hi Everyone, I'm having an issue with an image looking strange when I am viewing the page on mobile. I am happy with how the "Freebie" block looks on desktop: ...But when I resize it on mobile it looks very small height-wise: The other blocks resize to an almost square shape and I would like something similar for the freebie bloack. Is there a way to achieve this when resized? Thanks! -
custom-css Background colour behind arrow link
spotonlynne posted a question in Coding and Customization
Site URL: https://weedwise.squarespace.com Hello, Me again! On the same site I just posted about I have also been asked to create a section with links to various pages, using an arrow with a coloured background. This needs to display differently on a mobile - see attached. Can anyone help me please, as I have tried various ways and failed. https://weedwise.squarespace.com Pw: W33dw1s3 Thank you! Lynne -
Site URL: https://ferret-porpoise-kz74.squarespace.com/ I have used a code to create an overlay caption to appear on grid gallery images whilst hovering... however I would like for the caption to sit at the bottom of the image rather than the top (as show). Any help would be fantastic! Many thanks!
-
Site URL: https://ievaviphoto.com/ Hello, people! Would anyone give me a hand implementing this code onto my site? Would love to know the logic behind this! Thanks loads!! https://codepen.io/arjancodes/pen/gbweYB My site www.ievaviphoto.com
-
Hi, I have a content section n my 7.1. site, where I would like to align the image on the RIGHT SIDE of the text, and then center it to have both aligned in the middle of the section. Right now, everything is aligned on the left side of the section, with the image on the left of the text. Can someone help me add some padding / a margin on the left side to push the content to the middle of the page, and then also move the image to the other side of the text?
-
Site URL: https://helix-marigold-76hn.squarespace.com/ Does anyone know if it's possible to show the cart total in the header beside the cart like below? currently its like: Thanks site pw: 1234
-
Site URL: https://parrot-apricot-rfb9.squarespace.com/ Hey everyone, Please can you help me with a custom CSS to apply Helvetica Bold across my nav bar and headers. ATM I have the system font Helvetica Neue at its biggest weight 700 but the brand demands Helvetica Bold. Page (still under construction): https://parrot-apricot-rfb9.squarespace.com/ Much appreciated! M x
-
Site URL: https://digital-summit-landing-page.squarespace.com/config/ I customized "The Latest" section so it has a wavy pink. I want the grey background color changed to white so it blends with the other sections. But I don't know how! Can someone please help?
-
(wells template) I have an image block: card on my page, and I'd like to have a drop shadow around the card. Does anyone know some css for this? Thanks much! -
Site URL: https://www.diabeticexchangeusa.com/price-list Site URL: https://www.diabeticexchangeusa.com/price-list Any ideas how I can a "get a quote" feature on this page? It would be great if my customers can select their items, and the total be added up in the corner of the page or something.
-
Site URL: https://helix-marigold-76hn.squarespace.com/ I need a secondary menu with dropdown function. It works in my code pen but when i move it to squarespace it doesn't seem to work, on desktop but works on mobile. any suggestions? codepen: https://codepen.io/jilldiane/pen/ZEKXdpe site:https://helix-marigold-76hn.squarespace.com/ pw: 1234 thanks
-
Site URL: http://www.ryanewanchuk.com Password: SquarespaceDemoHelp! Hi, I am working on my site, and I've decided to use it as a sandbox to try to do some more advanced things. In particular, I am trying to figure out how to make my navigation bg colour change to match the bg colour of a section on scroll. I'd like it to change when 90% of the next section is visible. An example of this is at https://www.bynd.com/ I'm sure this would involve anchors and javascript, but I was curious if there was a simpler way to accomplish this? -
How to add a background image to Squarespace 7.1 blog page?
Momo222 posted a question in Coding and Customization
Site URL: https://parrot-apricot-rfb9.squarespace.com/missionupdate Hello everyone, Please can you help me with a code to add a custom BG image to my Squarespace 7.1 blog page: Page (still under construction): https://parrot-apricot-rfb9.squarespace.com/missionupdate Thanks so much! -
Breakpoint 7.1? Keep Desktop Header and menu on iPad in Portrait
JDF posted a question in Coding and Customization
Site URL: https://www.grahammarriott.com/ I'm trying to overcome the lack of ability in SS 7.1 to set the mobile breakpoint. I can't seem to find a way to keep the desktop header, with Site Title on left and Navigation on right. I only want the hamburger on mobile devices, not on iPad in portrait. Header background is transparent... New to 7.1 here, any and all help is greatly appreciated. Thank you! -
Site URL: https://www.rachelconstantino.com/free-breath-journey-thank-you-1%C2%A0 Hello everyone, I am hoping someone can help me with this issue. I've been searching the forum for hours and can't seem to find the answer. I want to create a CUSTOM form that opens when you click on a button. Using the "lightbox" will not work, because I cannot use the forms from squarespace. I have created my own custom form via my professional email account, aweber, that I put on my site using custom code. (I've tried to make a form directly on squarespace, set up lightbox, and connect it using zapier, but it doesn't work) So now I have the form up on my site, but I want it to be hidden underneath a button, and appear when someone clicks on the button. Is this even possible? Here is an example of a friend's website, and what I would love my button/form to look like --> https://www.intuitivegym.com/birthday-spread/?fbclid=IwAR3e-hYG3iMvIOBIZ46XZc5Ikx0c572hrBmXKQNvPozc3Ppg_TekbIR63aI Here is the page I am working on --> https://www.rachelconstantino.com/free-breath-journey-thank-you-1 As it is now, I have a button that opens a lightbox form... but the form doesn't work. Below is my custom form, but I don't want it to be displayed automatically. I am hoping to find a way where a button will activate the teal form that says "Join the waiting list for the Breathe & Be Community......" --------- Any help is greatly appreciated. Thank you- 5 replies
-
- 1
-
-
- custom-css
- form
- (and 2 more)
