Search the Community

Site URL: https://endive-denim-89ds.squarespace.com/resorts pw: 1404-Hello Hi community, I have made a wall of images on my page that looks great on desktop, but feels way too long on mobile. I would like to display two images per row (kind of like an instagram page) for mobile screens only. I have tried with the code below that targets the section only, but it doesn't put the images side by side... Any help is appreciated. Thank you ! @media screen and (max-width:767px) { div#page-section-5fd63cbbc4373837b905ef57>.row { display: float; justify-content: space-between; align-items: center; width: 50% !important; float: left; }}

Site URL: https://www.ngoborders.org/blog All, I am using the mapplic map tool kit, and using iFrame to embed it on my client's site. The map directory/files are hosted on https://www.ngoborders.com/ngomap. The iFrame code which is embedded on the live site (https://www.ngoborders.org) is the following: <iframe src="https://www.ngoborders.com/ngomap/" height="650" style="width: 100%; border: none;"></iframe> The code works fine on desktop. It WORKED fine previously on mobile/tablet - but does not work now. I haven't made any changes. The map doesn't work on iPhone or iPad via Safari or Chrome. One thing I just noticed is that when I run Web Inspector on iPhone 13 Pro or my iPad Pro, I get the following: Failed to load resource: The certificate for this server is invalid. You might be connecting to a server that is pretending to be “www.ngoborders.com” which could put your confidential information at risk. https://www.ngoborders.com/ngomap I DON'T get this error when running Web Inspector on Desktop. So why am I getting this ONLY on mobile? I think that's why my map is being blocked on mobile. How can I fix this? The SSL Cert for ngoborders.com is valid... Squarespace displays the map OK in the design portal when you toggle the mobile or tablet display mode. Safari and Chrome on Desktop will show the iFrame if you resize the window to a mobile display. In Chrome's Web Inspector, if you switch it to mobile view, it also shows the iFrame. So, I think either something with iOS or maybe Squarespace? To recap: Desktop (macOS) - works OK Mobile (iPhone 13 Pro iOS 15.0.2) - Does not work Tablet (iPad Pro 11-inch iPadOS 15.0.2) - Does not work Any help would be really great, thank you!

Site URL: https://carrot-bronze-bld8.squarespace.com/ Is there a way to adjust the fixed height of my homepage rotating banner just on mobile? I have it set at 100vh which I like for desktop but would like to shorten it up a little for mobile. Thanks!

Site URL: https://www.euwine.wine/products For desktop version, I was making 2 rows of 5 buttons. However, the mobile version show as 1 column. I would like it to have arangement as desktop version. Have been trying all sort of code with no result. Please help

Site URL: https://www.bloomhomes.com.au Hello, I am having problems with the spacing of my mobile site. I have added a gallery slideshow to my homepage and in order to add a 'heading' above and a 'button' below - i need add 'new sections' both above and below the gallery slideshow. This spacing problem also occurs on the 'Build Process' page, I would like to decrease the space between to the headings, the content and the scroll arrows please - see image attached. The gap between heading and button is way too large on the mobile site and there doesn't seem to be anyway to fix this in the Site Styles - Design area? Another problem with the mobile site - front page banner looks fine on the desktop view of the mobile...but when viewing on my actual mobile device, the text does not fit? Please see images attached for examples, thank you! Version 7.1 www.bloomhomes.com.au - see screenshots attached

Site URL: http://www.simpledwelling.net/link-in-bio Hi everyone, I'm creating a 'link in bio' page on my website which will sit on the Instagram account's profile. Because Instagram is mainly viewed on mobile, I'm assuming this page will only be viewed on mobile as well. I understand Squarespace's responsiveness, but I'm wondering if it's possible to override the single-column layout on mobile and replace it with two-columns? I'd be only looking to apply it to this single page. The page will be made up of multiple single-images with the caption text below. I've attached an example. Any help would be amazing.

Site URL: https://www.desna.ca/ Looking to switch the order of content on some of my pages so the hiercahy is: title, image, body. Unsure if each element needs to be a seperate block? Also there are instances where there are multiple lents within the same section. Any help would be appreciated - many thanks

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.

Site URL: https://www.buenorodrigo.com Hello! Can I have 3 columns on desktop and just 1 column on mobile version? Appreciate your help! my page https://www.buenorodrigo.com

Site URL: https://araraswim.nl/bikini-sets/gin-amp-tonic-bikini-set Hello, On the pc version of my product item page, the products with more than one photo show a slideshow so the visitor can select and view multiple images of the product. However, in mobile mode only one picture (the thumbnail) shows up and you can't select to see the other ones. I'm afraid this lead to customers thinking there is only one picture. I have tried changing the style to stacked/carousel but nothing changed the mobile version. Ideally I would want it to be possible to select other photos, but shortening the time it takes to change pictures would also work. Can anybody help me out? Thank you very much

Site URL: https://mmschristy.squarespace.com/ Hey! In 7.1 I've added two text blocks side-by-side on the footer of a website. On desktop it looks great, but on mobile the blocks stack on top of each other. How do I make them keep their columns? website: https://mmschristy.squarespace.com/ pw 1234

Site URL: https://www.romivanderlinden.nl I have been trying to change the order on the mobile version, on desktop version everything is fine. On phone the order is : 01. beautyboosters 03. rpd the vertical line 02. butterfly 04. material research More work button - But I would like to have: 01. beautyboosters 02. butterfly 03. rpd 04. material research the vertical line More work button Is there a way to fix this? I also have this issue on the following pages: https://www.romivanderlinden.nl/photography https://www.romivanderlinden.nl/graphic-design As in on desktop it is from 1, 2, 3, 4... etc.. and on mobile it is 1, 4, 7, 10 etc.. Thanks in advance!

Hello Everyone, I have no real experience coding and I want to ensure the image seen on the desktop view is roughly the same size on mobile. How can I do this?

Hi, how can I reduce the text size on a mobile only view? I have a section just below the logo on the homepage which has a H2 size font, but I’d like to reduce it on mobile so it fits without line breaks. Hope someone can help, thank you.

Site URL: https://www.maksymrewko.com/personalwork/schach Hi there, looking to reduece the size of headline images on my mobile breakpoint. This is the code I used on another website but it doesnt seem to work on teh exmaple shown. I believe I need to change the .gallery-fullscreen-slidehow to something else? @media screen and (max-width:640px) { .gallery-fullscreen-slideshow[data-width="full-bleed"] { height: 50vh !important; } } Any help would be great

Is there a way to display product images as slideshow on mobile, but to stay stacked on desktop? I'm using Clay template (Brine template family)

Site URL: http://www.ryanballphotography.com Hi there, I have setup my homepage with three images as a grid:overlay. I have set this to show text after I hover, this is perfect for desktop browsers and I don't want to change this. However for mobile devices, the text doesn't show (as the hover function does not work on touch devices). I therefore want to change this to "show text before hover" for mobile browsers, without affecting the desktop browser. So how do I keep "show text after hover" on the desktop browser and "show text before hover" on mobile devices. I'm using squarespace 7.1. web address is www.ryanballphotography.com. Thanks Ryan

Hi, I want to change the color of the logo only when the navigation on mobile is open. Currently is black I would like it to be white. Also I want to change the shopping cart icon to white when the menu is open only. Currently what the X is doing now. www.gypset.com password: gypset2020

Site URL: https://www.jennamacphoto.com Hi there, I was hoping someone could help make my mobile site look exactly like the desktop version (www.jennamacphoto.com). The only issue is the index blocks have been cropped in mobile view so you can't see the image properly. I would like to keep the parallax text overlay function if possible too please. If not, could you please tell me how to disable mobile view please? Thanks so much!! Any help would be appreciated!

Site URL: https://testing-changes.squarespace.com/shop/cashmere-wrap Trying to optimize a site for mobile but the changes I make in Site Styles are pretty awful on the desktop version. I know I can fix this with some CSS and a media query for mobile but some of it is beyond my (very limited) coding capabilities. Can someone help me? Specifically I'd like to be able to set the Thumbnail Size and Spacing to be one thing on mobile and another thing for larger screens (40 px/2 px and 90px/11px respectively) and also change the Title Font size for mobile as well. The other tweaks I think I can swing by finding a middle ground that looks decent on all devices but I'd love to be able to fix these elements at least. Thanks so much!

Site URL: https://tmforwomen.squarespace.com/ Hello, I have used the below code to centre align my mobile navigation text. I would like to move the text down so it is aligned in the centre vertically also. Is there a way to do this? Many thanks :) // Center Mobile Text // .Mobile-overlay-nav-item, .Mobile-overlay-folder-item { text-align: center;} .Mobile-overlay-menu {width: 100%; z-index: 1;}

Hi there, I have two text block columns beside another on my site and this is set in Desktop, but in Mobile it stacks and turns into poor alignment and spacing. How can this be altered? Thanks!

Site URL: https://spark-pros.squarespace.com/home Hi, , I've run into a weird issue on mobile. The pages scroll side to side. Is there any code that would remove this? The page password is "Swello" screen-20211012-094558.mp4

Site URL: https://www.thevelveteenstudio.com/ Hello, I'd like to move both buttons to beneath the footer logo, or ideally make them smaller and have them neatly side by side. Not sure how to go about this! PW: Finnegan1

Site URL: https://www.wavvis.com/ Hi guys. I wonder if someone can help me solve this problem. On my desktop view I see the full section of my page (forms, blocks, etc.), however when I move to mobile version it cuts it on half, or it overlaps with my footer. First two images are showing desktop view, other two are showing mobile view. Any help would be greatly appreciated.