Search the Community

How can I increase the size of a carousel on mobile? Also, I have obtained a css code to allow rotating words on the home page, as well as the html for it. But, it doesn't display right on mobile. How do I fix this? Here's the code: // Rotating Word 1 // .rotating-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #4FEAAB; } // Rotating Word 2 // .rotating-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #4FEAAB; } // Rotating Word 3 // .rotating-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #4FEAAB; } // Rotating Word 4 // .rotating-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #4FEAAB; } // Rotating Word 5 // .rotating-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #4FEAAB; } // Rotating Words // .rotating-words{ display: inline; text-indent: 5px; } .rotating-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } }

Anybody know how I can hide the navigation menu in mobile (both tablet and phone) and use a hamburger or like navigation instead? Also, Id like to create a header on my home page with a few phrases at the end that rotate between them. Any idea how? Thanks!

I have a css code I added. How do I get this to only display on desktop and tablet, but not phone? Here's the code. // Rotating Word 1 // .rotating-words-1 span:nth-child(2) { -webkit-animation-delay: 3s; -moz-animation-delay: 3s; -o-animation-delay: 3s; -ms-animation-delay: 3s; animation-delay: 3s; color: #ffff00; } // Rotating Word 2 // .rotating-words-1 span:nth-child(3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; color: #ffff00; } // Rotating Word 3 // .rotating-words-1 span:nth-child(4) { -webkit-animation-delay: 9s; -moz-animation-delay: 9s; -o-animation-delay: 9s; -ms-animation-delay: 9s; animation-delay: 9s; color: #ffff00; } // Rotating Word 4 // .rotating-words-1 span:nth-child(5) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; color: #ffff00; } // Rotating Word 5 // .rotating-words-1 span:nth-child(6) { -webkit-animation-delay: 15s; -moz-animation-delay: 15s; -o-animation-delay: 15s; -ms-animation-delay: 15s; animation-delay: 15s; color: #ffff00; } // Rotating Words // .rotating-words{ display: inline; text-indent: 10px; } .rotating-words-1 span{ position: absolute; opacity: 0; overflow: hidden; color: #6b969d; -webkit-animation: rotateWord 18s linear infinite 0s; -moz-animation: rotateWord 18s linear infinite 0s; -o-animation: rotateWord 18s linear infinite 0s; -ms-animation: rotateWord 18s linear infinite 0s; animation: rotateWord 18s linear infinite 0s; } // Rotating Animation Keys // @-webkit-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -webkit-transform: translateY(-30px); } 5% { opacity: 1; -webkit-transform: translateY(0px);} 17% { opacity: 1; -webkit-transform: translateY(0px); } 20% { opacity: 0; -webkit-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-moz-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -moz-transform: translateY(-30px); } 5% { opacity: 1; -moz-transform: translateY(0px);} 17% { opacity: 1; -moz-transform: translateY(0px); } 20% { opacity: 0; -moz-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-o-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -o-transform: translateY(-30px); } 5% { opacity: 1; -o-transform: translateY(0px);} 17% { opacity: 1; -o-transform: translateY(0px); } 20% { opacity: 0; -o-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @-ms-keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; -ms-transform: translateY(-30px); } 5% { opacity: 1; -ms-transform: translateY(0px);} 17% { opacity: 1; -ms-transform: translateY(0px); } 20% { opacity: 0; -ms-transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } } @keyframes rotateWord { 0% { opacity: 0; } 2% { opacity: 0; transform: translateY(-30px); } 5% { opacity: 1; transform: translateY(0px);} 17% { opacity: 1; transform: translateY(0px); } 20% { opacity: 0; transform: translateY(30px); } 80% { opacity: 0; } 100% { opacity: 0; } }

Hello, I want to change the font for a specific page. If I change it from the Site Styles, it would edit the whole website's font. What custom css should I use to have a different font for a specific blank page. This is it: https://mastercarsreview.com/gallery Thank you!

I'm currently using the Hayden template and wondering if there is code to add my uploaded font to my squarespace banner. I don't want the typical squarespace text style in each banner section, but looking to add my own custom text and possibly adding text animation if at all possible. Here is my website homepage: https://www.mccloskeycoaching.com/ The text on the screen now is on the image itself I created in picmonkey. But is there a way to code the text on the website directly? I have done it everywhere else on my site except for the banner image. Thanks!

Hi, can anyone help me with displaying the tagline on the mobile version of my site please? www.vibeyogaandpilates.co.uk P/W mysite100 Thanks in advance Mike

When I click to read my blog the title shows up on my header but I don't want it there. Is there a code to insert to remove this?

I want to block China (I don't mean to sound offensive) but chinese based companies constantly steal peoples artwork and try to sell on cheap products as their own (this has been happening ALOT recently to people I know) and i'd like to block the country all together from my website. I'm not too knowledgeable on coding and since I can't seem to find an option to do this i'm hoping you can via coding. Thank you!!

Hi All, I am building a new site in 7.1 and need to hide a few pages on desktop/mobile etc as I have done many times in 7.0 using the below code. For the life of me I can figure out how to get this working in 7.1 with the new index page builder?? Before it was using #page-name as the target but I have tried several things as the target but no joy. // hide desktop banner image on mobile @media screen and (max-width: 640px) { #corporate-header {visibility: hidden !important; display: none !important; }} // hide mobile banner image on desktop @media screen and (min-width: 640px) { #corporate-header-mobile {visibility: hidden !important; display: none !important; } Any advice appreciated! Thanks! C.

Hello! I'm trying to insert a coding block of some maps brought in from ArcGIS in a Brine template page, using some code suggested by ArcGIS. However, when the map is brought in, it's very tiny, and does not fill the entirely of the block. When I add any specific pixel widths to the code, it extends outward to the right so a majority of the map is out of view. I'd like to get it so that it at least extends the same width as the image at the top of the page. This is what I'm using: <iframe width=”100%" height=”750” frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://njrgp.maps.arcgis.com/apps/opsdashboard/index.html#/a856ba6b11df4a0bb5098b8ad1cadda3"></iframe> Sadly, my coding skills sort of peaked, then went into a coma around 1999, so I'm out of ideas trying to figure this out. Thank so much! Jason Wickersty

Can somebody please please help me with my website. I am trying to remove the left & right padding of the images on the top of my blog.(Mobile only) I have four blogs in total on my website but I want this modification to only effect two blogs. (https://www.thecigarbible.com/en/newsblog) and (https://www.thecigarbible.com/de/newsblog) I am using the following code to adjust other padding settings on website primarily the homepage: I am facing the complication that when I change the following code, padding is added to both text and images in the blog. I only want to remove the padding on the top image and not the text. If somebody could help or point me in the right direction that would be amazing!

Hi, my website is www.thecigarbible.com On the mobile website I want to remove all left, right and top padding on the image blocks containing the text "Newsfeed" and the one with "Cigar of the month", so that the image block has no padding top, left and right of the mobile screen. I have tried several different options posted on the forum herea but none seem to work right. I am either left with padding at the top, some small padding either left or right or other content blocks on my website are effected. I am using the template: Brine. I would really appreciate some help.

Hi, Is there a way to have just a certain amount of block(s) shown in mobile function that are normally shown on Desktop?

Hello! Ive designed a website geotruckin.co.uk and would like to change 3 lines of text red (service page, bottom 3 lines) without changing the whole design. Ive found out the only way to do it is through the Advanced settings with coding, however I don't know much about that. Does anyone have any advice or know how to do it? Thanks for your help! 🙌

Hi there, I am building a website for a client and they have asked that the gallery grid lightbox 'X' is darker and the left and right arrows are darker and are visible all the time (rather than only on hover). I have scoured the forum and can't seem to find a code that works for the site. The template is Foster. The website is https://apricot-frog-pc6a.squarespace.com Password: lynne.2019 An example of this can be viewed on any of the pages under 'work'. Any help would be greatly received! Many thanks, Hannah

Hello Everyone ! I am reaching out because I am a bit stuck on some little coding tweak. I already went through the forum but the answers I found do not really work. Here is my issue: I have the pro version of Squarespace which allow me coding. I have a website (Brine template) with an english/french version and on both version I created a event calendar page. In order to have my logo color to pop-out and keep up with my branding / visual identity, I added a green background to that calendar page. Desktop / Tablet version: It's looking good as a small image is displayed on the day I m running a class/event. Mobile version: There is no image displayed, fair enough, however with that green color, I cannot really see the days there is an event. My idea is to: When there is an event schedule I want to change the color of the square from that weird light green color to a gold color, numbers would be in white. So on the mobile version, an event would be displayed like that : The entire square would be gold & the date displayed in white. What code shall I insert ? Shall I insert it in the advance option custom css of my page? Here are some pictures of the calendar on the desktop & mobile. Here is the link to my website www.qualitycupofcoffee.com PS: Don't mind, I have been working on it on the last few days, the videos banners seems to be loading slower than usual. I still need to have a look at it. Many thanks ! Manon

Hi, I want to ad the linkedin insight tag to my website. I browsed the forum and help guides but didn't find a solution. I don't know if it's possible. Anybody knows how to do that ? Here is a link to faq page on inkedin: https://www.linkedin.com/help/lms/answer/65521/the-linkedin-insight-tag-faqs?lang=en

Hi Everyone, When I scroll down on my page the logo in the top left corner hides, but then when I scroll back up it appears and displays over text/images/etc. This looks bad and seems unnecesary, but there is no way to disable it. Does anybody know of a way I can code through it? I understanding coding, but I am unfamiliar with html and css. Thanks.

Hey y'all, Working on launching my first site and am pretty much learning as I go. Creating a site that is basically an umbrella for the projects I want it to point to. I am wondering if anybody has any tips to get the linked pages to be different colors. i.e. main landing page = black ; project 1 page = baby blue ; project 2 page = olive, etc. Reading articles to get a sense of some simple syntaxes, but thought I'd ask here, too. My html experience harkens back to the myspace days, but want to learn more. Any feedback would be amazing! Thank you so much. Best of luch on all of your projects! Gratefully, Roman

I need to insert an image for a text-dropdown effect using html code, but how can I do that? Is there somewhere that I can upload and store images for use on my site?.....because that's the only way to do it since the image needs a source. But I can't seem to find a file storage feature on squarespace. Please help!