Search the Community

I'm working on a website and there seems to be a problem with the mobile view. It looks like the logo is covering the drop down navigation. When you first go to the site on mobile it doesn't do it but when you refresh and try to use the nav you can't see the pages. She's using the Mojave theme. Viewing on iPhone. URL: modernsocialdetroit.com Does anyone know why this is happening?

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; } }

Hi. I just added a html block to my website. It looks perfect on desktop. But, I don't know how to get it to display correctly on mobile. Anybody have an idea? Here's the css code. Thanks! // 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: 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; } }

My client's website is growthleadersgroup.com There is a left/right shift on mobile where you can basically grab the screen and move it left or right and then it will spring back when released. a horizonal scroll? I cannot figure this out!

Hi. I'm attempting to change the opacity of my banners on mobile as the parallax is falling too far behind the text and making it difficult to read. Can anyone advise a CSS injection that would change the banner opacity on mobile only so that the banner is more faint? Many thanks in advance,

Hey all, I'm building a site on the Wav template with forced Mobile. I have the menu sliding out so it only covers a small part of the page. But part of page it's not covering is just white. Could someone direct me in having the site visible behind it. https://bell-parrot-x7ly.squarespace.com/ password is password

Hi! I created a split screen banner using flexbox, and I'm having a hard time getting the elements to stack on mobile, rather than stay squished on one line. This is the page I'm working on: https://www.augustbitters.com/home Would greatly appreciate any assistance I can get as my computer is on the verge of being thrown out the window 🙂

Hello, I uploaded a custom font and it's working fine on desktop but won't load on mobile. I've tested on both android and iphone. My site is https://www.beautybymichele.ca/about (homepage is a cover page). I'm trying to add this font to both the header overlay text and the H1 headings. I read it's good to add many font formats so that's why I have so many. Here is the code I used: /**********CUSTOM FONTS**********/ //adding playlist script font @font-face { font-family: 'Playlist-Script' !important; src: url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7183b492ddd0f8b82bc87/1573328955817/Playlist-Script.eot'), url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7184559401f78176f21e2/1573328965178/Playlist-Script.otf'), url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc71859df818a4a7428db06/1573328985576/Playlist-Script.ttf'), url('https://static1.squarespace.com/static/5dc1fa82d238444f39cf08ab/t/5dc7185f09cdf43d6db139cf/1573328991947/Playlist-Script.woff'); } //customize h1 to playlist font h1 { font-family: Playlist Script, sans-serif !important; color: #cfa2ad; font-size: 40px; } //style banner text to playlist font .desc-wrapper p>strong { font-family: Playlist Script, sans-serif !important; color: #cfa2ad; font-size: 60px; line-height: 63px; text-transform: capitalize; } Thank you so much... I have been stuck on this. Have a good day- Michele

I have a little bit of an odd problem with anchor links and mobile navigation in the new 7.1 template. I'm creating a single page website for a client (unfortunately I cannot yet share the website) and have created anchor links in the main navigation so users can quickly scroll to sections of the page. I've done this by setting the links as "#AboutUs" for example, and creating an empty div with the id "AboutUs" where I want the page to scroll to. In the desktop layout this works as intended, but on mobile when a navigation link is clicked the full-screen navigation menu remains open. The user is then completely unaware that the link has worked as it looks like nothing has happened, when in fact behind the full-screen navigation menu the page actually has scrolled to the correct point on the page. I've tested this in a live 7.0 site and it works as intended (open mobile navigation > click on anchor link > mobile navigation closes and page scrolls to the relevant id) but not in 7.1. I've also noticed that the page no longer smoothly scrolls when clicking an anchor link like it did before, but this is a minor issue compared to the above, so it doesn't bother me too much. TL;DR In 7.1, is there a way to force the mobile navigation menu to close when an anchor link is clicked?

Hi, I am using the brine template... I want to target and control the size of a specific image when changing between desktop, tablet and mobile. The image is the logo 'tbk' and sits within a banner at the bottom of a page. The size of the logo is perfect when in desktop mode, too small in tablet mode and too large on mobile. Is there some custom CSS i can add that will allow me to control the sizes for each. See images attached. website: tbktest.squarespace.com Thanks in advance. Dan.

Hello! So my site is https://earthlycraft.co/ It's almost there... but i cant work one thing out. How to change one of my banner hero images for mobile. It looks great on desktop however its too small on mobile, so i have another logo ready thats zoomed right in that i'd like to use for mobile only. I've added the file in design > custom css > manage custom files so i can use the link to the file I'm fairly familiar with media queries but i don't know the code to change the banner. When I inspect I get this code: .sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img Therefore i'm going for something along the lines of: @media only screen and (max-width: 600px) {.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {background image: https://static1.squarespace.com/static/5d00032088447c0001487495/t/5dcdc90c40062f0cf29e9ddc/1573767446853/mobilelogo.png;}} Help would be much appreciated!! Cheers!!

My site has a weird spring behavior on mobile. Rather than fixed horizontally, it can be pushed left or right and then bounces back. Very annoying. Can someone tell me how to eliminate this. I am using the Bedford (Hayden) template http:www.growthleadersgroup.com 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

I need some help fixing extra padding in between two images on Brine when viewing on a mobile device. The code I am currently using is: . @media screen and (max-width: 640px) { .homepage .sqs-block.image-block:last-child { padding-top: 0 !important; } Although I know this is only targeting the homepage. How can I target my services page (https://www.domaniquejazmindesigns.com/services) as well to get rid of the extra padding in between the two image blocks at the bottom of the page when viewing on mobile?

Hello. I am using code blocks so that I can customise, format and size my text in different areas throughout my website, without it affecting the general style of the website on a whole. I am not a fan of the general text box because I can not customise the text exactly how I want it. For example I do not want my H1, H2 or H3 titles to be really big, but I do want some text on my website to be bigger or styled differently in certain areas to stand out and grab attention, which is why I am using the code blocks. However, I am finding that the code blocks are not scaling correctly for mobile. On desktop they look fine and give the visual impact I am looking for, but on mobile because they are not scaling properly, some of the text gets cut off or is just way too big. For example, in one code block I am using the following code: <center> <font size="5em" color="#ffffff"><span style="line-height:1.5em"><li style="list-style: none;">Let's get people talking.</li></span></font> <font size="7em" color="#ffffff"><span style="line-height:1.5em"><li style="list-style: none;">Let's create something EXTRAORDINARY together!</li></span></font> <font size="4em" color="#ffffff"> <span style="line-height:2.5em"> <li style="list-style: none;">I'm ready when you are.</li></span></font> </center> Which on a desktop looks like this: But on a mobile it looks like this: I am using em instead of px because I read that this is meant to help with the scaling, and in most cases this is fine across my entire site, but for some reason it is not here. How can I use code blocks to create custom text for visual impact on my site, but still have it scale down so it looks just as good on mobile? Thanks.

Hi, I use the Moksha template and wanted to have a fixed/frozen navigation header when scrolling down, allowing visitors to still see the navigation bar even if they scroll down. I found a way to do it using custom CSS, where I added the below coding I found on this forum and it seems to work so far on a desktop version, however it doesn't work on mobile devices... any clue on what I can do ? Thanks for your help!! Camille This is the Custom CSS code I used for desktop: header { position: fixed; width: 100%; z-index: 4; }

So right now I have a site that in desktop view it looks good for the hero image/text but when going into mobile view the text color doesn't stand out from the portion of the hero image that fits into the mobile portion. I was just wondering if there is a way to change the text color of mobile view?

Hello all, I would like to change the default menu icon + interaction to the one I found on this code-pen page: https://codepen.io/yousafkhan/pen/XWWJQyp I'm using the Sofia template. Does anyone know how I'd be able to do this?

hello i have an image that is centered on my page in desktop and tablet view, but in mobile view it gets pushed off center to the right. i have no idea how to fix this. any suggestions?IMAGES ARE OF DESKTOP VIEW AND MOBILE VIEW. i need the laptop to be centered.

Hello, I'm looking for a way to create a footer that has two columns on tablet and mobile view like this: and then two separate rows that are on the same line on desktop view: Any help would be greatly appreciated. Thanks!!!

My site's mobile navigation UI has an extra button, which looks like three dots (...) and has no apparent function. When you tap it, it turns into an X, and it turns back again when you tap it again. Presumably it's supposed to pull something up, but whatever its purpose, it isn't doing anything, and I don't really need it to do anything. Checking my style settings on squarespace didn't provide any answers. Help! (If you need more info, my site can be found at storybriar.com, and I'm using the template "Ready", from the "Skye" family of templates.)

Hello! I love the theme and how everything is done - the only thing I would like to change is that when my website is viewed on mobile the hamburger icon/3 dots/search are in the footer the bottom rather than being on top? Is there a way to change that? My website is www.wabi-sabii.com Many Thanks!

Hi all This is my first squarespace website and I've had a look through the forum but can't seem to find an answer to my issue. I'm using the Mojave template and love how it looks. However on mobile I'm finding some of the larger fonts are breaking words up onto multiple lines, which looks pretty messy. Is there a way I can reduce font sizes for the mobile version only? If not, has anyone got any other bright ideas!? Website is beckyh.co.uk Thank you!

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.

My website, storybriar.com, has a homepage made up of four images: my name and three navigation buttons. Each navigation button is an image you can click on to get to a different part in my site. However, when you view the site on mobile, it takes all my images and stacks them vertically, forcing the viewer to scroll through my primary navigation with each "button" completely filling the screen. It looks like the problem is that my website is switching to a "mobile style" that stacks all the content vertically. I want my site to appear exactly the same on mobile as it does on the desktop, but my template, "Ready" (in the "Skye" template family), gives no option for that. How do I make the two look the same? Barring that, how do I just get it so that my homepage navigation buttons stay lined up three in a row?