Search the Community

Site URL: https://www.chefanastasia.com Hi there, I'm having an issue with buttons overlapping copy when in mobile view, and small tablets. Strangely, this seems to view fine on some bigger phones, but on mine and a few friends have confirmed it also overlaps. I have adjusted the settings in edit mode→mobile view, but it doesn't transfer. For example: The screenshot with the correct button is from the mobile view on my laptop. The screenshot with the overlapping button is from my iPhone 12. Is there a way to make the button stay in place? Or another creative way to work around this issue?

Site URL: https://www.fariss.art/ Hello, I am having some problems with the Custom CCS Font on my website. I have the .ttf file uploaded and it shows up on my computer and my friends as well but not on mobile. This is just for my headings. @font-face {font-family: Viesta; src:'https://static1.squarespace.com/static/631d027bc2ba931673289ed7/t/633b13de04e62a3540d5dd7b/1664816094125/Viesta.ttf'} h1 {font-family: 'Viesta'; line-height: 0.9em; letter-spacing: 0.04em; font-weight: 400; font-size:51px} Thank you!

Hey! I'm using the new Squarespace 7.1 and am having some troubles finding any info on making the nav break at a certain point to enable the mobile hamburger icon for desktop. I don't want their typical nav for desktop, just wanting to have the hamburger icon across all devices. Thanks for any help! https://chameleon-porcupine-c7jc.squarespace.com/ password: 1234

Site URL: https://www.vanishtravel.com/book-copy-copy I am trying to get the two buttons to appear side by side on mobile. Right now they are vertically stacked. Please help, thanks!

My typefaces are not showing up on my mobile site. Below is the code, I'd love some help! @font-face { font-family: 'mundial', sans-serif; src: url('https://static1.squarespace.com/static/62cd90e706e63f41715fba9f/t/633b0ffe7e360b02782dc2fd/1664815102204/font.ttf') format('truetype'); src: url ('https://static1.squarespace.com/static/62cd90e706e63f41715fba9f/t/633b08f4432c494ec162dc04/1664813300976/font.woff') format ('woff'); }

Site URL: https://www.thehost.co/home I'd like this page to be stacked on tablet view like it is in mobile. I tried playing with mobile break point but it doesn't seem to change anything other than the navigation. This is page is an index and uses 7.0. Thank you!

Site URL: https://lychee-carnation-4cdg.squarespace.com/ Hi! I'm trying to create a multilingual website and everything is working except for the items on folder that are not showing up on mobile. I followed this tutorial: https://www.creationsbyfaria.com/blog/multilingual-site-squarespace Basically I've created every page I need for each language, and I'm using custom CSS on each page to hide the navigation items I don't want to show on a specific language. Everything is working perfectly fine on desktop, but on mobile, on the second and third language, the items on the folder I have are not showing up. I've attached a print of what my Pages look like. The first language is Portuguese, the second English, and the third French. The Products folder is the one I'm having trouble with on Mobile. Basically when I click the folder the options are not visible, but this only on the second and third language. On Portuguese they show up fine. This is the code I'm using on the English Pages to hide the Portuguese and the French ones: <style> #header .header-nav-item:nth-child(1) {display:none} #header .header-nav-item:nth-child(2) {display:none} #header .header-nav-item:nth-child(3) {display:none} #header .header-nav-item:nth-child(4) {display:none} #header .header-nav-item:nth-child(5) {display:none} #header .header-nav-item:nth-child(6) {display:none} #header .header-nav-item:nth-child(7) {display:none} #header .header-nav-item:nth-child(15) {display:none} #header .header-nav-item:nth-child(16) {display:none} #header .header-nav-item:nth-child(17) {display:none} #header .header-nav-item:nth-child(18) {display:none} #header .header-nav-item:nth-child(19) {display:none} #header .header-nav-item:nth-child(20) {display:none} #header .header-nav-item:nth-child(21) {display:none} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(1) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(2) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(3) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(4) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(5) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(6) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(7) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(15) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(16) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(17) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(18) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(19) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(20) {display:none}} @media screen and (max-width:767px){#header .header-menu-nav-item:nth-child(21) {display:none}} What can I do to solve the problem of the folder items not showing on mobile? Thanks a lot! Error Folder Menu.mp4

Site URL: https://www.tradecreatives.co.uk I'm having an issue with the scrolling text block - on the editor it appears fine, but on mobile safari browser we have this bug. Does anyone know how to solve this issue? .

Site URL: https://www.martaraptis.com/ Hello, I have a banner image that looks good on my laptop but terrible on mobile. Can someone please help me reduce the size of it so it fits nicely on mobile? thanks so much

Site URL: https://www.casita.com.hk/ Hi! Can kindly help me remove the horizontal overflow on my homepage mobile view? Link: www.casita.com.hk I tried code below but it's not working 😞 Thank you! body { overflow-x:hidden !important; }

Site URL: https://www.rinnegatiandco.com Howdy! I'd like to add a graphic to the mobile menu overlay for a client's site. I can't seem to find coding for this in these forums or elsewhere. I've mocked up what I'd like it to look like, see attached! Thanks. 🙂

Site URL: http://annauma.ca/home-iku Hello! I've gotten pretty much everything I need on my site now, and it works great on desktop! And on mobile for the most part, save for two things I'd like to solve: Make last nav menu a "button", and Add social icons but hide one + change logo I have this achieved on the desktop version. On the home page, you'll see one social icon hidden and one that says "IKU" - when you click on IKU, it takes you to the Inuktitut version of the site, and the original button is now hidden and a replacement "button" is there made from css code. On mobile, that replacement "button" is just a regular nav link and the social icons don't show up at all. English home page is annauma.ca password annauma IKU version is annauma.ca/home-iku Code for the social icon hide/replace logo that works on desktop: .icon[href*="http://annauma.ca/home"] svg { visibility:hidden; } .icon[href*="http://annauma.ca/home-iku"] svg { visibility:hidden; } .icon[href*="http://annauma.ca/home-iku"] { background-image: url(https://static1.squarespace.com/static/62227612c34bc74d480c8bc0/t/63310641bdd1660630c7494a/1664157249175/EN+%281%29.png); background-size: cover; background-repeat: no-repeat; transform:scale(1.25); } (vice versa for the English icon) And code for the "button" that works on desktop: .header-nav-item [href*="/donate-iku"] { color: #000000 !important; border-color: #faa524 !important; background: #faa524; border-width: 2px; border-style: solid; border-radius: 10px; -webkit-transition: 0.1s background-color linear, 0.1s color linear; -moz-transition: 0.1s background-color linear, 0.1s color linear; -o-transition: 0.1s background-color linear, 0.1s color linear; transition: 0.1s background-color linear, 0.1s color linear; font-family: 'BARLOW SEMIBOLD'; font-weight: 700; font-size: 16px; font-style: normal; letter-spacing: .02em; text-transform: uppercase; line-height: 1.2em; padding: .86em 1.6032em !important; } nav.header-nav-list { align-items: center; } .header-nav-item--active a{background-image:none!important} /* Hide eng donate */ .btn[href*="/donate"] { display: none !important; } How might I use this for mobile too?

Site URL: https://designbycaitie.ca/blog Hey there, I found some code by Inside the Square to create a two-column layout for blog collection pages. It works great, but now my excerpts look wayyy too long, and the category tags take up too much space. Can someone provide code to 1) REDUCE the excerpt to three lines ending in an ellipses, and 2) REMOVE the category tags, both changes on mobile view only? Thank you!

Site URL: https://www.pinteafilmcompany.com/portfolio/sukh-dhaliwal Trying to make the font size smaller, specifically on the mobile version of the portfolio page if possible. As you can see, the text on the bottom collides, doesn't look too pretty. Totally fine on desktop though.

Hi, I created a page with 3 vertical blocks of: Image then title under then text under it. So we have 3 rows: Image Image Image Title Title Title Text Text Text But when I open the page in mobile view I get all the texts and then the images under. How can I keep same order? Is there any way to put each Image, Title, Text in one block? Thank you! Sabine

Hello, I'd love to be able to hide my logo on my mobile site only, I love how it looks on desktop but it takes up too much room that just doesn't make sense at the top of the page on mobile. www.ariarosedurward.com

Site URL: https://pufferfish-mauve-jkwn.squarespace.com/new-page-1 Hi! I want a summary list to be displayed with enlarged images and centered excerpt in mobile view. I've added some custom code and sometimes (especially in CSS edit mode) it looks like it's all perfect. But when I exit CSS edit mode and change to full screen the layout changes and the excerpt moves over to the left side. I've attached 2 screenshots so you can see both versions (left side: looking all good in edit mode // right side: shifting to the side in full screen). I used the following code: @media screen and (max-width:640px) { .sqs-gallery-design-list .sqs-gallery-design-list-slide:not(.no-image) .sqs-gallery-meta-container { width: 100% !important; } .sqs-block-summary-v2 .summary-block-setting-design-list .summary-thumbnail-outer-container { width: 100% !important; } .sqs-block-summary-v2 .summary-block-setting-text-size-medium .summary-title { margin-top: 20px; } } .summary-thumbnail-container{ padding-bottom:40px !important } .summary-excerpt{ padding-right:20px !important } .summary-thumbnail-container{ padding-left:20px !important } The problem occurs on all my devices (laptop, tablet, android phone) and on all the browsers that I've tried (Microsoft Edge, Chrome, Firefox). So it must be the code but I can't figure it out. Anybody out there who can help me with that?? 🙂

Site URL: https://www.mikepintea.com On the mobile version of my front page there is a strange white space below my only section on that page. This white space is only visible on mobile, not on desktop version. Using Version 7.1. Played with every setting I could find, and tried some previous Custom CSS that people have suggested, but they did not work for me!

Site URL: http://www.curiousundertakings.com/shop Hello! I have been working on building my company's website using resources from this forum, but have had issues finding the answer to this specific question. So I'm hoping somebody here can answer it for me! On our shop page, we have the 3 large images with the words "jewelry," "herbals," and "decor," which are meant to link to the specific parts of the shop. Yes, I know these are redundant - considering that there's the menu to the left. However, we like the aesthetics of it. On the desktop version of the site these appear in a horizontal row. On the mobile version they appear vertically. How can I make them appear horizontally on the mobile version? I assume it has to do with some code - since I found some code for making the shop icons appear in columns of 2+, which I inserted into the code injection section. However, I'm not really a programmer, so I don't know what I'd type to make these 3 images/buttons appear horizontally. Does anybody know where I could find the resources to figure out what to type, or can anybody provide me with the code and tell me which section to place it in? Here is a link to the specific page.

Site URL: https://www.sophieelectra.com/ Hi! I like my current text line hight for my portfolio ( hover: follow cursor) but the text overlaps when it's viewed on mobile. How do I change the text line height to 0.08em just for mobile? Thanks so much!!

Site URL: https://www.prsnlhb.com/view-all/phb-essential-logo-t-shirt-black Hi Everyone, I'm trying to position the description into the centre is there a way it can be done? Thank you!

Site URL: https://star-seal-m7mk.squarespace.com/ Link: https://star-seal-m7mk.squarespace.com/ Password: emma Hi! I'm looking to change the logo for the mobile version of the site when the navigation menu is open. Here's the css code I tried but not working: .header--menu-open { .header-title-logo img { visibility: hidden !important; } .header-title-logo a { background-image: url(https://static1.squarespace.com/static/61aa4ec70c8cf2221705ac29/t/61ae6a7643eebf085e1b0280/1638820471169/sonderself_secondary_cream_rgb_1080px%40300ppi.png) !important; background-size: contain; background-repeat: no-repeat; background-position: center; } } Any help is appreciated, thank you!

Site URL: https://www.thebeautifulproject.org/about-our-programs Hello! I have been running into an issue with an image I embedded onto a page. The reason the image is embedded to start with is because it's an image map and I want people to be able to click the elements on our map to learn more about them. I'm able to see the image map fine on desktop, but on the mobile site, the image seems to be overflowing and creating a much wider page than I desire. I would love if someone could help me with some code to keep the image within the container on mobile by putting the image into a horizontal scroll. I don't desire to make the image smaller, I just want to put the image map in a scroll container to keep the normal width of the mobile site. I would also love a scrollbar for people to see. Below is the code for the image map I have placed into the embed block. <!-- Image Map Generated by http://www.image-map.net/ --> <img src="http://thebeautifulproject.org/s/PROGRAM-PIPELINE-medium-1476-750-px.png" usemap="#image-map"> <map name="image-map"> <area target="_blank" alt="Black Girl Imagemaker Workshop" title="Black Girl Imagemaker Workshop" href="https://thebeautifulproject.org/black-girl-imagemaker-workshop" coords="188,227,429,252" shape="rect"> </map> Thank you to anyone that can help!

Site URL: https://www.hemastyles.com/ I've tried all the codes available online but can't seem to get it to work. I want my products or the earrings page on mobile site to display two columns of products instead of being stacked. Thank you.

Site URL: https://www.preppingdeals.net/ In an effort to utilize more screen space, I would like to decrease the padding and margin on mobile mode only, but I am very happy with desktop mode and would like to preserve it. Is it possible? I would like to do this for my blog grid items as well as the blog contents.