Search the Community

Hi! I'm creating a page in the Avenue template. When viewed on a desktop there is an image on the left, and text to the right (see "M", attached). When viewed on a mobile device, the image comes first, with the text below (see "D", attached). I'd like to swap the positions of the 2 blocks on the mobile device. That is, I'd like the text first, followed by the image below. How can I do this? Thank you!

Hi, I want to change the background colour of the mobile menu bar in the 'Almar' template, but I can't change this. All the code on this forum does not seem to work. Can somebody please help me out? It seems that 7.1 has some flaws like not having the option to change this from the color menu. The url is https://bassoon-carillon-s3hj.squarespace.com/, the password is Loremipsum1 Best, Joel

Hi, I'm using the OM template to create a simple artist page. Most of the page is pretty much set except that on mobile screens the page is not displaying correctly.What I want is for the Nav bar to be underneath the logo, the logo itself to be top and center of the page and for the background images to fill full screen. However, I got this to work briefly but now the media CSS appears to not work. The url of the website is richiequake.com and the password to view it is Help123. UPDATE I have decided to place the logo on the upper left hand and the menu button on the upper right hand side of the website. This is my CSS now: media screen and (max-width: 500px) { #header { float: none; display: block; text-align: left; }} @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 .canvas{ max-width: 100% !important; max-height: 100% !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 11px !important; background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } } @media only screen and (max-width: 400px) { .logo-image .logo img { position: relative; right: 100px; top: -130px; width: 60%; //add for good resize based to screen } } @media only screen and (max-width: 400px) { #mobileMenuLink { margin: 0; display: inline-block; //change block to inline position: relative; font-family: "Helvetica Neue",Arial,sans-serif; font-weight: 400; font-style: normal; line-height: 1.2em; font-size: 12px; text-transform: uppercase; letter-spacing: 2px; text-align: center; visibility: visible; left: 70%; top: -2%; } } @media only screen and (max-width: 400px) { #collection-5de6d28545f1a7075b7a2741 { } } .page-borders-thick #mobileMenuLink { border-bottom-width: 2px; padding: 5%; // ADD PADDING } #mobileNav { background: none; position: relative; top: 50%; } #mobileNav .wrapper { border-bottom-style: none; border-bottom-color: none; } #mobileNav .menu-open { margin-top: 30px !important; } Now my issue is that I want the menu to open down when the button is clicked. I tried to do this by using the .menu-open class but that did not work. How can I do this?

I just launched my squarespace site: www.altmanderm.com I am using the mojave template, if you look at it on your phone or in mobile view, the logo is way too small and also the main image isnt showing up properly. Is there a way to fix this?

I have a folder in my nav bar, which works great on desktop. However, it doesn't work for me on mobile. I need a way to have just the nav links that are IN the drop down menu folder on mobile. I really need a way to have the folder on desktop nav bar, but only the links in mobile. Any suggestions? I am up for any code injections, or custom codes that will accomplish something like this. My template is Mojave. Thank you in advance for the help!

Hi there, I need to invert my logo in a few instances in the Hyde template that I'm building for my mobile + products desktop pages: Here is the scenario, I can't see it on some of the white bg's - my ineptitude is killing me The only solve I've found is to invert it everywhere. Thanks so much! F

I have am using a Brine/Moksha template and, on various pages, I need to change the background image to a different image when on mobile/tablets. Does anyone have script/html solution for this that I can inject in header? or css? See https://yelar.squarespace.com/hi-im-barbara-on-home for an example.

Hi, I have a banner that I'm using and it works perfect on the desktop site but looks slightly odd in the mobile view. is there anyway to adjust the banner by "X" pixels in the mobile view? Here's the page it's happening on https://www.jfkjets.com/jfk-arrivals Thank you!

Hi guys, I'm trying to create a button on my mobile site's header. I've created a button on desktop and inside the mobile menu using styling of the 2nd navigation element. Now I'd like to have this button out on the mobile header. Thank you!

Hi there Trying to figure out how to maintain the same image ration on mobile as is offered on desktop / laptop view. I.e. our header image is a team shot, which displays perfectly on desktop & laptop, but on mobile, you can only see 3 out of 10 people. Please help..

Hi, I've got a slideshow gallery on my homepage, but on a mobile the images appear cropped and do not adjust to fit within the size of the screen. Any ideas of how to fix this? The website is: https://platinum-orange-8f4p.squarespace.com/, password: 1234 Thanks, Anna

Hi, I'm wondering if theres anyway to edit whilst in mobile mode? I've designed desktop, but when viewing on mobile some content is in a different order to what I'd like. For example, a list I've organised on the desktop in order of importance - reading left to right horizontally in columns and on two rows (so a 3 x 2 grid), however on mobile the first column of the second row is appearing second on the list. Can i rearrange the order they appear on mobile. Thanks

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?

I have created a 2 page website in 7.1. I want to disable the mobile breakpoint of 991px and just keep the regular menu bar visible as there is only 1 button to a contact page on there. Does someone have the CSS code to disable the mobile menu in 7.1 since there isn't an option to set it to 0px in the style editor?

Wondering if someone could help me with custom CSS code to change my avenue sites mobile navigation bar font to a custom font. Already using a custom font for the rest of the site just cant get it to apply to mobile nav. As a bonus if I could get the CSS to change the text of my mobile navigation from "menu" to something else that would be great. Thanks!

Hey guys, so my problem is, I am a photographer and my home page is an image which fills the screen, however when this home page is viewed on a mobile device, it crops the image in to a point where its barely even visible anymore. Is there any sort of way with a plugin or code to make it so that when the site is viewed on a phone it uses a different selection of images that are more mobile friendly? Thanks.

For some reason, although I play with the settings when I'm on an Ipad my site looks like this: Any way I can spread it out? On a regular computer it looks normal but I want to make it proportionate on mobile too. Thanks guys 🙂

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?

Hello I'm using the Bedford template and have a one page website with section anchor links up top in the navigation menu. These links work perfectly fine on desktop and iPad. On the iPhone though, the links are hidden in a hamburger menu button and after opening up the menu cannot be clicked. Can anyone help me figure out how to make these links work on mobile? Thank you!

Hello, everyone! I designed a site on the Foster template and used a Gallery Grid block for the staff page. On desktop if you hover your cursor over the photos each staff member's bio appears. However, on mobile you have to click a super tiny circle in the lower right of the photo to see the bios. I never knew this existed until a Squarespace chat support team member pointed it out. He recommended I reach out to the Forum to see if anyone has used custom code to enlarge this circle or to make the bio show up on default when the photo is clicked on a mobile device. If anyone has experience with this, please share. =) Thank you!!!

Hi all, I have a very simple problem at least explanation-wise. I am using simple slideshow on the homepage of my website and it works great on desktop, but when I switch to mobile preview it leaves huge blank spaces above and below the images. You can see it on my website sab.hr or on the images in this post. I would like to know if there is some custom code I could utilise in order to remove that unnecessary blank space around my slideshow on mobile. Thanks!

I'm working on a site using SS 7.1 and I'm having issues with video playing properly on iPhone X. Has anyone else had problems with this and is there a solution? All other devices seem ok now (there were issues recently that seem to have been resolved). Video is hosted on Vimeo. Site is https://pendower-beach.squarespace.com I can send login password if anyone can help me out with this.

I am currently working on a site using the Forte portfolio format and while text format works on a computer screen it fails to do so on mobile. I have my text organized in a column format and the issue I am experiencing is that on the computer you can read column 1 and column 1 where as on mobile it reads column 2 and column 1. Could anyone please help with this issue? It would be most appreciated.

Hi, I'm using the Brine template, which on mobile, creates a margin of 64px above the content, that acts as the background to the navigation bar. In the Site Style, the only control over this, is site background colour which is currently set to white. Is there a way to remove this space, or move the content up behind the nav bar to reflect the larger breakpoints. Site can be viewed here Thanks so much

how can i control text sizes for index gallery slideshowin brine template.. the text is still to big on mobile. i have to adjust manually!